float元素帶來了哪些好處和壞處？
image.png
如何克服float帶來的壞處壁却？
清楚浮動(dòng)原献。
如何清除浮動(dòng)输涕？
對(duì)受到影響的元素利用clear方法清除。
父元素塌陷就可以對(duì)父元素設(shè)置overflow: hidden;
相鄰元素受到影響就對(duì)相鄰元素設(shè)置clear哥蔚。
以父元素塌陷為例
<html>
<meta charset="utf-8">
<head>
<title>float屬性的特點(diǎn)測(cè)試</title>
<style type="text/css">
.wrap {
border: 4px solid gray;
}
.box1{
float:left;
height:30px;
background:yellow ;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box1">我是內(nèi)容</div>
</div>
</body>
如圖倒谷，子元素沒有被父元素包裹住。這是不對(duì)的~
image.png
為何overflow：hidden可以清除浮動(dòng)糙箍？
clear可以清楚浮動(dòng)渤愁。很正常，因?yàn)閏lear就是為了這個(gè)設(shè)計(jì)的深夯。那么為啥overflow：hidden可以清除浮動(dòng)呢抖格？原理是什么？
CSS中為什么overflow:hidden能清除浮動(dòng)(float)的影響咕晋？原理是什么他挎？ - 知乎
挺復(fù)雜的，大概意思就是設(shè)置這個(gè)hidden時(shí)捡需，瀏覽器的計(jì)算高度的方式不會(huì)把浮動(dòng)元素的高度視為0.
清除浮動(dòng)的方法會(huì)不會(huì)帶來副作用办桨？
會(huì)。
