CSS清除浮动的几种方法

最新推荐文章于 2022-05-30 20:50:29 发布

樱桃小丸犊子吖

最新推荐文章于 2022-05-30 20:50:29 发布

阅读量175

点赞数 4

分类专栏：前端 CSS 文章标签：浮动

本文链接：https://blog.csdn.net/qq_42098849/article/details/103437085

版权

前端同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

CSS

8 篇文章 0 订阅

订阅专栏

清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度塌陷的问题

1.额外标签法：使用clear:both清除浮动

在浮动元素后面使用一个空的自身清除浮动的元素，即在最后一个浮动标签后，新加一个标签，给其设置clear：both；

<!--清除浮动样式-->
<div style="clear: both"></div>

其优点是简单，方便兼容性好，但是一般情况下不建议使用该方法，因为会造成结构混乱，不利于后期维护.（不推荐）

2.父级添加overflow属性

父元素添加overflow:hidden, 通过触发BFC方式，使得达到撑起父元素高度的效果.实现清除浮动，其中设置zoom:1;为兼容IE6/7，触发hasLayout属性。其代码简洁,但超出盒子部分会被隐藏（不推荐）

.fahter{
	width: 960px;
	/*增加清除浮动的代码*/
    overflow:hidden;
    zoom:1;
}

3.利用伪元素clearfix来清除浮动

给父级元素添加了一个:after伪元素，通过清除伪元素的浮动，达到撑起父元素高度的目的。借助:after微元素设置样式，不需要在HTML代码上额外增加元素。（推荐）

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
	content: "";
	display: block;
	height: 0;
	clear:both;
	visibility: hidden;
}
.clearfix{
	*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

4.双伪元素方法的使用

通过给父元素设置双伪元素来达到清除浮动的效果（推荐）

.clearfix:after,.clearfix:before{
    content: "";
    display: table;
}
.clearfix:after{
    clear: both;
}
.clearfix{
    *zoom: 1;
}

清除浮动方法（5）设置容器元素高度height，只适合高度固定的布局。

清除浮动方法（6）容器元素也设置浮动。不推荐，会产生新的浮动问题。