清除浮动

原创于 2021-05-25 17:13:38 发布 · 134 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

Css 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了CSS中清除浮动的方法，包括使用`clear:both`、伪元素`clearfix`以及`overflow`属性。通过这些方法，可以解决内容因浮动元素而引起的布局问题，保持页面结构的稳定性。同时，示例代码详细展示了如何应用这些技术。

代码如下

<style>
    .box { border: 1px solid #ccc; background: pink; }
	.red, .green, .blue { float: left; width: 100px; height: 100px; }
 	.red { background: red; }
 	.green { background: green; }
 	.blue { background: blue; }
</style>
<body>
<div class="box">
    <div class="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
</div>

使用clear:both清除浮动

...
<div class="blue"></div>
<div style="clear:both"></div>

利用伪元素clearfix来清除浮动

.clearfix::after{
    content:"";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
 }
.clearfix{
	*zoom:1;/* IE6、7 专有 */
}

使用CSS的overflow属性

.box{
	border:1px solid #ccc;
	background:#eff2f4;
	overflow: auto/hidden;
}