清除浮动的方法总结

it2023-11-13 68

清除浮动的背景:

在一个标准流的块级元素中,如果它的高度是子元素撑开的且子元素设置了浮动流定位,会导致它的(父元素)的高度塌陷; 举个例子:

显示效果: 可以看到父元素box的高度塌陷了;

解决方法:

可以在父元素添加一个子元素(必须是块级元素),来清除浮动的影响; <style> * { margin: 0; padding: 0; } .box { background-color: burlywood; border: 1px solid #666; } .box>div { float: left; width: 100px; height: 100px; background-color: cadetblue; } .clearfix{ clear:both; } </style> </head> <body> <div class="box"> <div>1</div> <div>2</div> <div>3</div> <p class="clearfix"></p> </div> </body>

这里可以看到父元素被子元素顺利撑开.

若想不添加子元素来清除浮动可以在父元素添加属性 overflow:hidden; * { margin: 0; padding: 0; } .box { background-color: burlywood; border: 1px solid #666; overflow: hidden;//加在了这里 } .box>div { float: left; width: 100px; height: 100px; background-color: cadetblue; } </style> </head> <body> <div class="box"> <div>1</div> <div>2</div> <div>3</div> </div> </body> 通过伪类来清除浮动 <style> * { margin: 0; padding: 0; } .box { background-color: burlywood; border: 1px solid #666; } .box>div { float: left; width: 100px; height: 100px; background-color: cadetblue; } //注意: display:属性值可以是block也可以是table,用块级元素才能清除浮动 //且content:"";这一句也不能缺; .box::after { display: block; content: ""; clear: both; } </style> </head> <body> <div class="box"> <div>1</div> <div>2</div> <div>3</div> </div> </body>

最新回复(0)