对浮动(float)的理解

浮动在我们页面布局时经常会使用，设置了浮动的容器会脱离普通标准流也就是我们常说的脱标。

浮动

MDN上是这样说的

float CSS 属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动（文档流）中移除，但是仍然保持部分的流动性（与绝对定位相反）。

上面说道"该元素从网页的正常流动(文档流)中移除"，这里说的就是浮动的脱标特性。

那么什么是文档流呢？文档流处在网页的最底层，它表示的是一个页面中的位置，我们所创建的元素默认都处在文档流中。

元素在文档流中的特点：
块元素：在文档流中会独占一行，块元素会自上向下排列
行内元素：在文档流中只占自身的大小，会默认从左向右排列

那么问题来了，浮动到底能够解决什么问题呢？

最初，引入 float 属性是为了能让 Web 开发人员实现简单的布局，包括在一列文本中浮动的图像，文字环绕在它的左边或右边，最典型的就是报纸版面。

我们来详了解下，原始页面显示效果是这样：

在Float容器上添加float:left之后会看到文字环绕容器显示

<div class="box">
  <div class="lihua"></div>
  <p>
    On Monday, Li Hua went to school just like any other day. He woke up early in the morning,
    feeling a mix of excitement and a slight hint of laziness. After quickly getting dressed in
    his school uniform, he grabbed his backpack and headed downstairs to have breakfast. Li
    Hua's mother had prepared a nutritious breakfast for him, including a bowl of warm oatmeal
    and a glass of freshly squeezed orange juice. He ate his breakfast quickly, eager to start
    his day at school. As he finished his meal, he bid his mother goodbye and headed out the
    door.
  </p>
</div>
.box {
  width: 600px;
  height: 300px;
  background-color: antiquewhite;
  margin: 0 auto;
  border: 1px blue solid;
}

.lihua {
  /* float: left; */
  width: 100px;
  height: 100px;
  background-color: lightgreen;
}

这里.parent元素会脱离正常文档布局流，并吸附到其父容器的左边。

通过实现一个简单的浮动案例来体现出浮动的效果，但是在这里并不能完全体现浮动的作用。

我们在这个基础上进行修改一下，新增一个容器在.box盒子下

.bg {
  padding: 20px;
  background-color: cadetblue;
}

为了方便查看效果在lihua元素下添加一个外边距，最终效果：

这里我们可以看到新增的容器在浮动元素的下面。

清除浮动

清除浮动的本质：就是清除浮动元素造成的影响，清除浮动之后，父级会根据浮动的子盒子进行自动检测高度。

我们在进行浮动操作的时候会发现原本其他元素都在该元素下方，浮动之后会进行环绕，如果我们不想让其他元素受到浮动的影响就需要通过清除浮动的操作。

第一种方式：额外标签法

在浮动元素的下方添加一个空的块级标签并添加clean样式。优点是通俗易懂，书写方便，缺点是添加许多无意义的标签，结构化较差。

<div style="clear: both"></div>

clear: both是停止任何活动的左右浮动。

第二种方式：使用伪元素替代额外标签，父元素标签后添加一个块元素

优点是没有增加标签，结构更简单，缺点是没有照顾低版本浏览器

<div class="box">
  <div class="clearfix">
    <div class="lihua"></div>
    <div class="bg">11122121</div>
  </div>
  <div>
    On Monday, Li Hua went to school just like any other day. He woke up early in the morning,
    feeling a mix of excitement and a slight hint of laziness. After quickly getting dressed in
    his school uniform, he grabbed his backpack and headed downstairs to have breakfast. Li
    Hua's mother had prepared a nutritious breakfast for him, including a bowl of warm oatmeal
    and a glass of freshly squeezed orange juice. He ate his breakfast quickly, eager to start
    his day at school. As he finished his meal, he bid his mother goodbye and headed out the
    door.
  </div>
</div>
.clearfix::after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

第三种方式：父级添加overflow属性

优点是代码简洁，缺点是无法显示溢出的部分。

.clearfix {
  overflow: hidden;
}

个人博客已上线，欢迎来访~
传送门：夜雨炊烟