css float疑点解惑

float元素带来了哪些好处和坏处？

image.png

如何克服float带来的坏处？

清楚浮动。

如何清除浮动？

对受到影响的元素利用clear方法清除。
父元素塌陷就可以对父元素设置overflow: hidden;
相邻元素受到影响就对相邻元素设置clear。
以父元素塌陷为例

    

    
    


   

       
我是内容
   

如图，子元素没有被父元素包裹住。这是不对的~

image.png

为何overflow：hidden可以清除浮动？

clear可以清楚浮动。很正常，因为clear就是为了这个设计的。那么为啥overflow：hidden可以清除浮动呢？原理是什么？
CSS中为什么overflow:hidden能清除浮动(float)的影响？原理是什么？ - 知乎
挺复杂的，大概意思就是设置这个hidden时，浏览器的计算高度的方式不会把浮动元素的高度视为0.

清除浮动的方法会不会带来副作用？

会。