float元素带来了哪些好处和坏处？
image.png
如何克服float带来的坏处？
清楚浮动。
如何清除浮动？
对受到影响的元素利用clear方法清除。
父元素塌陷就可以对父元素设置overflow: hidden;
相邻元素受到影响就对相邻元素设置clear。
以父元素塌陷为例
<html>
<meta charset="utf-8">
<head>
<title>float属性的特点测试</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">我是内容</div>
</div>
</body>
如图，子元素没有被父元素包裹住。这是不对的~
image.png
为何overflow：hidden可以清除浮动？
clear可以清楚浮动。很正常，因为clear就是为了这个设计的。那么为啥overflow：hidden可以清除浮动呢？原理是什么？
CSS中为什么overflow:hidden能清除浮动(float)的影响？原理是什么？ - 知乎
挺复杂的，大概意思就是设置这个hidden时，浏览器的计算高度的方式不会把浮动元素的高度视为0.
清除浮动的方法会不会带来副作用？
会。
