文档章节

CSS复习笔记二:浮动和清除浮动

Angelks
 Angelks
发布于 2017/03/05 21:59
字数 688
阅读 329
收藏 0

 一、浮动的性质

1、浮动的元素脱离标准文档流,并且可以设置宽度和高度。

2、浮动的元素相互贴靠

3、浮动的元素有“文字环绕”效果 

        含有图片的div浮动,段落不浮动,文字会环绕图片。

4、div浮动了且没有设置宽度,那么将自动收缩为内容的宽度。

浮动(脱标)的元素是不能把容器惩处高度的。

二、浮动的清除

方法1:

        给浮动元素的祖先元素加高度。只要浮动在一个有高度的盒子中,那么这个浮动就不会影响后面的浮动元素。所以就是清除浮动带来的影响了。

换句话说,没有高度的容器无法关住浮动。所有后面盒子里面的浮动元素依然在贴上一个盒子里面浮动的元素。

网页制作的过程中,height属性很少出现,因为能被内容撑高。所以这个方法很少用。

方法2:

为后面浮动元素父亲添加clear: both;属性

1		<div>
2			<ul>
3				<li>HTML</li>
4				<li>CSS</li>
5				<li>JS</li>
6				<li>HTML5</li>
7				<li>设计模式</li>
8			</ul>
9		</div>
10	
11		<div class="box2">  → 这个div写一个clear:both;属性 
12			<ul>
13				<li>学习方法</li>
14				<li>英语水平</li>
15				<li>面试技巧</li>
16			</ul>
17		</div>

致命缺陷:margin 失效。本质原因还是因为两个div都没有高。

方法3:隔墙法

在两个div之间添加一个div

给这个div两个类 一个cl 给clear:both属性;一个h16给高度属性,用这个墙撑出高度,这样就避免了margin失效了。

虽然有中间的div(墙)撑出高度,但是前后两个div的高度依然是0。

.cl{
			clear: both;
		}
	.h16{
 			height: 16px;
 		}

<div class="box1">
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JS</li>
			<li>HTML5</li>
			<li>设计模式</li>
		</ul>
	</div>
	
	<div class="cl h16"></div>

	<div class="box2">
		<ul>
			<li>学习方法</li>
			<li>英语水平</li>
			<li>面试技巧</li>
		</ul>
	</div>

方法4:内墙法

	<div class="box1">
		<ul>
			<li>HTML</li>
			<li>CSS</li>
			<li>JS</li>
			<li>HTML5</li>
			<li>设计模式</li>
		</ul>

		<div class="cl h16"></div>
	</div>

	<div class="box2">
		<ul>
			<li>学习方法</li>
			<li>英语水平</li>
			<li>面试技巧</li>
		</ul>
	</div>

把墙修在墙内,这样两个div都有高了

方法5:overflow:hidden;

一个父亲,不能被自己浮动的儿子撑出高度,但是,如果这个父亲加上了overflow:hidden;那么这个父亲就能够被浮动的儿子撑出高度了。这个现象,不能解释,就是浏览器的小偏方。并且,overflow:hidden;能够让margin生效。

© 著作权归作者所有

共有 人打赏支持
Angelks
粉丝 0
博文 10
码字总数 6719
作品 0
马鞍山
前端工程师
私信 提问
10分钟复习CSS盒模型与BFC

css盒模型与BFC 本文为收集整理总结网上资源 旨在系统复习css盒模型与bfc 节省复习时间 阅读10分钟 什么是盒模型 每一个文档中,每个元素都被表示为一个矩形的盒子,它都会具有内容区、paddi...

coderLfy
2018/06/30
0
0
CSS清除浮动_清除float浮动

CSS清除浮动方法集合 一、浮动产生原因 - TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了。 浮动产生样式效果...

单线程生物
2016/04/07
38
0
《CSS那些事儿》之阅读笔记

1.IE6不支持子代(>)和相邻兄弟选择器(+)。 2.建议少有@import因为外部css,IE6下会出现闪屏现象。 3.大型复杂网站,定义通用样式,不要过分细分css,适当的注释可以提高修改和搜索的便利性...

提小莫
2018/01/03
0
0
CSS清除浮动

前言 总括: 在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出...

Damonare
2016/12/07
0
0
css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?一起来$('.float')

一、抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class="outer"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div></div> 分析CSS......

乐派电影
2014/04/11
138.6K
3

没有更多内容

加载失败,请刷新页面

加载更多

如何开发一款以太坊(安卓)钱包系列2 - 导入账号及账号管理

这是如何开发一款以太坊(安卓)钱包系列第2篇,如何导入账号。有时用户可能已经有一个账号,这篇文章接来介绍下,如何实现导入用户已经存在的账号。 导入账号预备知识 从用户需求上来讲,导...

Tiny熊
今天
2
0
intellJ IDEA搭建java+selenium自动化环境(maven,selenium,testng)

1.安装jdk1.8; 2.安装intellJ; 3.安装maven; 3.1 如果是单前用户,配置用户环境变量即可,如果是多用户,则需配置系统环境变量,变量名为MAVEN_HOME,赋值D:\Application\maven,往path中...

不最醉不龟归
今天
4
0
聊聊ShenandoahGC的Brooks Pointers

序 本文主要研究一下ShenandoahGC的Brooks Pointers Shenandoah Shenandoah面向low-pause-time的垃圾收集器,它的GC cycle主要有 Snapshot-at-the-beginning concurrent mark包括Init Mark(P......

go4it
昨天
4
0
Makefile通用编写规则

#简单实用的Makefile模板: objs := a.o b.o test:$(objs) gcc -o test $^ # .a.o.d .b.o.d dep_files := $(foreach f,$(objs),.$(f).d) dep_files := $(wildcard $(dep_files)) ifneq ($(d......

shzwork
昨天
3
0
《万历十五年》的读后感作文4000字

《万历十五年》的读后感作文4000字: 万历十五年,即1587年,距今已过去432年。在明朝276的历史中,这一年很平淡,并没有什么特别之处。黄仁宇的《万历十五年》一书,有别于其他的历史叙述方...

原创小博客
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部