浮动的产生会带来哪些问题,大家看一下例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF…
浮动的产生会带来哪些问题,大家看一下例子
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .diva,.divb{ width: 300px; height: 300px; border: 3px solid red; float: left; } </style></head><body> <div> <div class="diva">diva</div> <div class="divb">divb</div> </div></body></html>
二个子div左浮动脱离了文档流,导致父div塌陷,我们可以定义一个clear:both样式,然后在子div的末尾加上一个div引用clear:both样式,不过这样html结构代码量就会增多,大家可以了解一下这种清楚浮动的方法,但是久伴不推荐使用这种方案,大家可以使用:after 伪元素来清楚浮动,代码如下
.clearfix:after { content: "/00A0"; display: block; visibility: hidden; width: 0; height: 0; clear: both; font-size: 0; line-height: 0; overflow: hidden;}.clearfix { zoom: 1;}
以上代码请在浮动的父元素上面引用即可