1、浮动的影响:
父元素不设高度,由内容自动撑开,若子元素浮动,则此子元素不能撑开标准流的块级父元素
原因,子元素脱标,不占位置
2、清除方法:
①直接设置父元素高度 (新闻网页、京东推荐)
②额外标签法
给父元素最后添加一个块元素、此块设置 clear:both
(缺点:添加额外标签,复杂HTML结构)
③单伪元素清除法
父元素后 设置伪元素 代替额外标签(不复杂化HTML),写法:
.clearfix::after{
content:'';
display:block;
clear:both;
/*(让网页看不到代码)*/
height:0;
visibility:hidden;
}
④双伪元素清除法,写法:
.clearfix::before,.clearfix::after{
content:'';
display:table;
}
.clearfix::after{
clear:both;
}
⑤给父元素设置overflow:hidden
溢出元素内容区域

博客介绍了CSS中浮动的影响,当子元素浮动时,若父元素不设高度,子元素无法撑开标准流的块级父元素,原因是子元素脱标不占位置。同时给出了清除浮动的方法,如设置父元素高度、额外标签法、单伪元素清除法、双伪元素清除法和设置overflow:hidden等。
1918

被折叠的 条评论
为什么被折叠?



