清除浮动的方法

最新推荐文章于 2024-08-25 04:44:58 发布

weixin_30719711

最新推荐文章于 2024-08-25 04:44:58 发布

阅读量78

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ytwanzi/p/6500786.html

本文详细介绍了当父盒子高度为0时，子盒子不占位置的问题及解决方法，包括使用clear:both、overflow:hidden等技巧，并探讨了浮动盒子与其他标准流盒子的相互影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、问题：

　　　父盒子高度为0，子盒子不占位置，子盒子不会撑开父盒子。

　　　（下面的标准流盒子，会跑到父盒子中的子盒子下面。）

二、解决方案

　　 ◆清除浮动不是不用浮动，清除子盒子因为浮动，对父子造成的影响。

　　 ◆清除浮动的方法

　　 clear: left | right | both

　　工作里用的最多的是clear:both;

　　 ★额外标签法

在最后一个浮动元素后添加标签。

　　 ★给父集元素使用overflow:hidden; bfc

　如果有内容出了盒子，不能使用这个方法。

　　 ★单伪元素清除浮动　　

.clearfix:after {

　　　　　　　　content: “.”;

　　　　　　　　height: 0;

　　　　　　　　visibility: hidden;

　　　　　　　　overflow: hidden;

　　　　　　　　dispaly: block;

　　　　　　　　clear: both;

　　　　}

　　　　.clearfix {

　　　　　　　　/*IE678*/
　　　　　　　　zoom: 1;

　　　　}

　　★双伪元素清除浮动　　　

 .clearfix:before,  .clearfix:after {

　　　　　　　　　content: “.”;

　　　　　　　　　display: table;

　　　　}

　　　　.clearfix:after {

　　　　　　clear: both;

　　　　}

　　　　.clearfix {

　　　　zoom: 1;/*IE678*/

　　　　}