1. 什么是浮动
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
2.浮动的特性
- 浮动元素会脱离标准流(脱标)
浮动的盒子不在保留原先的位置 - 浮动的元素会一行内显示并且元素的顶部对齐
- 浮动的元素会有行内块的特性
任何元素都可以浮动,添加浮动之后有行内块元素相似的特性(例如行内元素浮动了,就不需要转换为块级/行内块元素,就可以直接给高度和宽度)
3.浮动元素经常和标准流父级搭配使用
1.先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置,符合网页布局第一准则
2.一个元素浮动了,理论上其余的兄弟元素也要浮动,以防引起问题
浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流
例如:小米网页
4.清除浮动
因为父级盒子在很多情况下不能给定高度,但是子盒子浮动又不占有位置,最后父级高度为0,就会影响下面的标准盒子
,所以需要清除浮动。
- 额外标签法(隔墙法,w3c推荐做法)
在浮动元素最后一个标签(块级元素,行内元素不可以)添加cssclear:both
- 父级添加overflow属性
给父级添加 overflow 属性,将其属性值设置为hidden,auto,scroll。 (优点:代码简洁,缺点:无法显示溢出部分,直接把溢出部分切掉,显示不了) - 父级添加after伪元素
在该盒子的后面生成了一个行内元素,改为block - 父级添加双伪元素