文章目录
前言
本篇文章总结了float可能对布局产生的影响及清除浮动的方法
提示:以下是本篇文章正文内容,下面案例可供参考
一、什么是浮动Float?
float 属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
CSS提供了三种传统网页布局方式:
- 标准流(普通流/文档流)
- 浮动float
- 定位
二、为什么需要浮动?
因为浮动可以改变元素标签默认的排列方式,可以让多个块级标签一行内排列显示。可以利用浮动完成标准流没办法完成的布局效果。
网页布局第一准则:多个块级元素纵向排列找标准流,横向排列找浮动
三、浮动的特性
添加了浮动之后元素会有很多特性
1.具有行内块元素的特性
可以理解为添加浮动的元素变成了一个盒子模型,默认盒子大小由内容决定,盒子之间无缝隙,会一行内显示并且元素顶部对齐,若父级宽度装不下这些浮动的盒子,则多出的盒子会另起一行对齐。
可以通过设置 width宽、heigh高、padding内边距、margin外边距等属性来改变盒子元素大小,盒子之间的距离,从而实现美观的布局。
2.脱标
设置了浮动的元素脱离标准流,会漂浮在后面的标准流上,不占位置。
四、浮动可能产生的影响
1、后续标准流被覆盖
网页布局经常采用标准流父元素+浮动子元素的方式。
实际浮动元素漂浮在父级元素之上,即脱标,不占位置,因此后续标准流就会补上空缺位置,浮动的元素就会遮盖住后续标准流。
注意:
浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.
2、父级盒子高度塌陷问题
父级盒子里可以装很多浮动盒子,若指定父盒子高度,则溢出的盒子会另起一行。
在实际开发中盒子个数根据实际开发情况而定可增可减,因此不方便给父盒子指定高度。但是盒子浮动又不占位置,若父盒子中所有元素均浮动,则父盒子高度为0.
若后续有标准流,则也会对后续标准流的位置产生影响。
五、清除浮动
为了解决浮动造成的影响(即浮动子标签无法撑开父盒子的高度),我们需要清除浮动(闭合浮动)。
- 如果父盒子本身有高度,则不需要清除浮动
- 清除浮动之后,父级就会根据浮动的子盒子自动检测高度。
- 父级有了高度,就不会影响下面的标准流了
以下是清除浮动的多种方式:
1、额外标签法(隔墙法)
在浮动元素末尾添加一个空的标签
W3C推荐做法 ,此方法不常用
例如
<div style="clear:both"></div>,或者其他标签(如<br />等)。
优点: 通俗易懂,书写方便
缺点: 添加许多无意义的标签,结构化较差
注意: 要求这个新的空标签必须是块级元素。
2、父级添加 overflow 属性
可以给父级添加 overflow 属性,将其属性值设置为 hidden、 auto 或 scroll
例如:
overflow:hidden | auto | scroll; //溢出部分隐藏
优点:代码简洁
缺点:无法显示溢出的部分
注意:是给父元素添加代码
3、父级添加after伪元素
:after 方式是额外标签法的升级版。给父元素添加:
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6、7 专有 */
*zoom: 1;
}
优点:没有增加标签,结构更简单
缺点:不照顾低版本浏览器
代表网站: 百度、淘宝网、网易等
4、父级添加双伪元素
给父元素添加
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
优点:代码更简洁
缺点:不照顾低版本浏览器
代表网站:小米、腾讯等
总结
为元素添加float浮动可以调整页面横向布局,但会对影响后续标准流布局位置,需要通过设置父级盒子属性或者清除浮动来解决。