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
2
3
4
5
6
7
.clearfix::after {
content: '';
display: block;
clear: both;
visibility: hidden;
height: 0;
}

这个方法的原理是什么呢?

  1. 首先::after是元素的伪元素,在元素后面生成伪元素
  2. content 是伪元素的内容,为空,只是让伪元素不显示,显然不是原理
  3. height:0 是为了让伪元素高度为0 ,显然不是
  4. visibility:hidden 是为了伪元素浏览器渲染但不显示,显然也不是
  5. display: block 只是为了让伪元素成为块级元素,成为触发 clear:both 的条件,有点关
  6. clear:both 规定在左右两侧不允许出现浮动元素, 这便是清除浮动的原理了

想详细了解可以参考这位博主的博客link2