CSS浮动布局

原文链接：blog.csdn.net/dongxiaod1/…

🎡浮动元素特点

浮动元素特点：

1. 脱离文档流(浏览器的标准流)，在文档流中不占位置，相当于飘起来。
2. 不管浮动前是什么元素，浮动后的默认宽与高都是被内容撑开（尽可能小），而且可以设置宽高。可以不用添加 display:block 属性。
3. 浮动元素比文档流级别高，会覆盖文档流的元素。
4. 不会独占一行，可以与其他元素共用一行，也就是实现了水平排布。
5. 不会 margin 合并，也不会 margin 塌陷，能够完美的设置四个方向的 margin 和 padding 。
6. 解决了行内块间隙的产生。
7. 浮动元素会受上面元素边界的影响，可以将上面元素设置为行内块元素，最好的方式是让上面的元素也浮动起来。

🛝浮动属性

🎠清除浮动

⚽影响

1. 对兄弟元素的影响： 后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响。
2. 对父元素的影响： 不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素。

⚽解决方式

1. 解决方式一： 给父元素指定高度。
2. 解决方式二： 给父元素也设置浮动，带来其他影响。
3. 解决方式三： 给父元素设置 overflow:hidden 。
4. 解决方式四： 在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置 clear:both 。
5. 解决方式五： 给浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理与方案四相同。(推荐使用)

.parent::after {
  content: "";
  display: block;
  clear: both;
}

可以设置为clearfix单独类，然后放到需要使用的标签上。可以实现复用。

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

<div class="fater clearfix">
  <div class="son"></div>
</div>

6. 💡双伪元素清除法：比单伪元素新增了解决margin 塌陷的情况。💡

   1. 在父元素的前面添加一个伪元素,用于解决 margin 塌陷问题。

      .clearfix::before {
        content: "";
        display: table;
      }
   

   table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。

   2. 在父元素的后面添加一个伪元素，用于清除浮动。

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

解决外边距塌陷情况：