清除浮动的方式

Posted zhoujingye

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了清除浮动的方式相关的知识,希望对你有一定的参考价值。

浮动:浮动元素不占用源文档流的位置,所以会对后面或者父级元素的排版产生影响,为解决这个问题,需要在元素中清除浮动,解决浮动元素造成的影响

父级元素因为子元素浮动而高度变为0
1.给父元素定义高度
2.利用after和zoom
添加一个空div 利用clear:both让父div自动获取高度
.clearfix:after{
content:" ";
display:block;//table
clear:both;
}

.clearfix{
zoom:1; //IE兼容 IE8以上和非IE浏览器才支持:after
}

其他方法参考:
https://www.cnblogs.com/niujifei/p/11212184.html

以上是关于清除浮动的方式的主要内容,如果未能解决你的问题,请参考以下文章

HTML要怎么清除浮动

浮动与清除浮动的六种方法

清除浮动的几种方式和兼容性处理

清除浮动的几种方式和兼容性处理

清除浮动的集中方式

清除浮动的几种方法