清除浮动的两种方法

21 阅读1分钟

1、左浮和右浮

image.png

2、在父元素中加 overflow: hidden

本质是将父元素变成一个 BFC(块级格式化上下文),达到清除浮动的效果,overflow 不为 visible 就行。

image.png

3、在父元素中加上 .clearfix

主要利用了属性 clear: both 的特性(清除左右浮动),再加上将伪元素放到 child 后面并将 content 设置为空字符串,就可达到清除浮动的效果。

image.png