CSS之浮动属性

私人博客

许小墨のBlog —— 菜鸡博客直通车

系列文章完整版，配图更多，CSDN博文图片需要手动上传，因此文章配图较少，看不懂的可以去菜鸡博客参考一下配图！

系列文章目录

前端系列文章——传送门
CSS系列文章——传送门

---

---

1.HTML 页面的文档流

1.标准文档流

标准文档流指的是元素排版布局过程中，
元素会默认自动从左往右，
从上往下的流式排列方式,
当前面内容发生了变化，
后面的内容位置也会随着发生变化!

2.留存弊端

无论多么复杂的布局，其基本出发点均是：“如何在一行显示多个div元素”
显然标准流已经无法满足需求，这就要用到浮动
以及某些元素会出现的特定区域，这就要用到定位

2.什么是浮动？

浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次

浮动层：给元素的 float 属性赋值后，就是脱离文档流，进行左右浮动，紧贴着父元素(默认为body文本区域)的左右边框

而此浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去

块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素

3.浮动的属性

float:
	none:	默认值。元素不浮动，并会显示在其在文本中出现的位置
	left: 	元素向左浮动
	right:	元素向右浮动

浮动后的div宽度会变成 0，但是其内边框可能撑起它的宽和高

4.浮动的特征

1. 块级元素失去“块状”换行显示特征，变为行内元素
2. 紧贴着上一个浮动元素（同方向）或父元素的边框，如果宽度不够将换行显示
3. 占据行内元素的空间、导致行内元素围绕显示 — 图文环绕效果
4. 可以强迫浮动元素换行显示， 使用 clear 属性

clear:
	none:	默认值，允许两边都可以有浮动对象
	left:	不允许左边有浮动对象
	right:	不允许右边有浮动对象
	both:	两边都不允许都浮动对象

5.浮动的作用

• 使多个div显示在同一行
• 常见的效果：各种导航栏，商品的排版，新闻的排版，文字环绕效果…

6.浮动的弊端

导致高度塌陷

当对于所有的子元素都设置了浮动之后，
而父元素没有去设置高度，
父元素失去了支撑同时父元素的高度消失，
缩成了一条线，高度出现了塌陷

解决方案：

1. 直接添加高度（不推荐）

高度固定死，内容如果是后端返回的数据不固定的话，不够灵活

2. 额外标签法（不推荐）

在最后一个浮动标签后，新加一个标签，给其设置 clear：both
clear: both, 本质是闭合浮动，就是让父盒子闭合出口和入口，不让子盒子出来
如果我们清除了浮动，父元素自动检测子盒子最高的高度，然后与其同高

• 优点：通俗易懂，方便
• 缺点：添加无意义标签，语义化差

3. 父级添加 overflow 属性（不推荐）

父元素添加 overflow:hidden
overflow: hidden, 本质是通过触发BFC方式，实现清除浮动

• 优点：代码简洁
• 缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素

4. 使用 after 伪元素清除浮动

• 优点：符合闭合浮动思想，结构语义化正确
• 缺点：ie6-7不支持伪元素::after，使用zoom:1触发hasLayout

.clear::after {
			content: '';
			display: block;（必须变成块元素）
			height:0; 处理兼容，让没有高度
			visbility: hidden;处理兼容，让消失
			clear: both;
		}

.clear {
	*zoom: 1;
	/* ie6 清除浮动的方式， * 号 只有在IE6 IE7执行，其他浏览器不执行 */
}

5. 使用 before 和 after 双伪元素清除浮动

• 优点：代码更简洁
• 缺点：用zoom:1触发hasLayout

.clear::after, .clear::before {
	content: '';
	display: block;
}
.clear::after {
	clear: both;
}

.clear {
	*zoom: 1;
	/* ie6 清除浮动的方式， * 号 只有在IE6 IE7执行，其他浏览器不执行 */
}

---

注

本博文缺失大量图片，严重影响内容完整性以及阅读体验，完整内容请前往本人菜鸡博客——许小墨のBlog