1. CSS 浮动
CSS的浮动(float)定义元素在哪个方向浮动,且周围的元素也会重新排列。这个属性往往应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动,所以在布局时一样很有用。
1.1 float属性
值 | 描述 |
---|---|
left | 元素向左浮动。 |
right | 元素向右浮动。 |
none | 默认值。元素不浮动,并会显示在其在文本中出现的位置。 |
inherit | 规定应该从父元素继承 float 属性的值。 |
1.2 浮动的性质
- 性质1:浮动的元素脱离标准文档流,所有标签,浮动之后,就不区分行内、块级了。
- 性质2:浮动的元素互相贴靠。
- 性质3:浮动的元素不会挡住文字,会形成“字围”效果。
- 性质4:如果没有设置width,会自动收缩为内容的宽度。
想对浮动性质有详细的了解,可以去阅读这位博主的博客link1
2. 高度塌陷
在文档流中,父元素的高度默认是被子元素撑开的,子元素多高,父元素就多高。但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时就会导致子元素无法撑起父元素的高度,由此引发父元素的高度塌陷。如果此时下面有其他元素,一旦你的父元素的高度塌陷,那么下面的元素必然会往上拱,这样会使你的页面布局非常混乱。
2.1 解决方法
直接给父元素加高度(不推荐)
- 优点:代码简单,容易理解
- 缺点:自适应性不强
利用clear:both;声明(不推荐)
- 原理:clear:both清除span两边的浮动,让父级div能自动获取到高度
- 优点:简单,代码少,所有主流浏览器都支持clear属性
- 缺点:不易理解,添加空白元素造成代码冗余
利用BFC特性(推荐)
3. BFC
BFC(Block Formatting Context)块级格式化环境
- BFC是一个CSS中的一个隐含的属性,可以为一个元素开启BFC
- 开启BFC该元素会变成一个独立的布局区域
元素触发BFC的条件
html标签为BFC
float属性值不为none
overflow属性值不为visible
既没有覆盖元素,也保持了独占一方的特性(保持了宽度),与下方元素也保持了最初的间隙
常用的方式为元素设置overflow:hidden(overflow:auto也是ok的) 开启其BFC, 以使其可以包含浮动元素
overflow:scroll 会有滚动条,可能并不需要的,所以不太推荐display属性值为inline-block、table-cell、table-caption、flex、inline-flex其中之一
position属性值为absolute或fixed
开启BFC后元素的特点:
- 不会被浮动元素覆盖
- 父子元素外边距不会重叠
- 可以包含浮动的元素
4. clear
clear
属性规定元素的哪一侧不允许其他浮动元素。
值 | 描述 |
---|---|
left | 在左侧不允许浮动元素。 |
right | 在右侧不允许浮动元素。 |
both | 在左右两侧均不允许浮动元素。 |
none | 默认值。允许浮动元素出现在两侧。 |
inherit | 规定应该从父元素继承 clear 属性的值。 |
5. clearfix
总所周知的万能清除法:
1 | .clearfix::after { |
这个方法的原理是什么呢?
- 首先
::after
是元素的伪元素,在元素后面生成伪元素 content
是伪元素的内容,为空,只是让伪元素不显示,显然不是原理height:0
是为了让伪元素高度为0 ,显然不是visibility:hidden
是为了伪元素浏览器渲染但不显示,显然也不是display: block
只是为了让伪元素成为块级元素,成为触发clear:both
的条件,有点关clear:both
规定在左右两侧不允许出现浮动元素, 这便是清除浮动的原理了
想详细了解可以参考这位博主的博客link2
GitHub Issues