CSS——浮动 - 技术栈

一、浮动简介

浮动：一种布局方式，使元素脱离文档流，

一旦元素脱离文档流了，它就不具备元素在文档流中的特点

块也不会独占一行了，行内也能设置宽高了，行内块也没有3像素的问题了

这种布局方式主要用于pc端，后期也会学更优秀布局方案，一定程度上替代了浮动

但不会完全替代，因为浮动的兼容性很好

设置浮动 float: ;

可选值

left 向左浮动

right 向右浮动

none 不浮动

二、浮动特点

1、设置元素浮动后，元素脱离文档流，元素原来在文档流中位置就不在了，下面的元素会立即补充上去

2、元素浮动后并不会乱跑,会局限在父元素范围内，会紧跟着上一个兄元素 ，如果上面的兄元素也浮动，他们就一起横向排列，如果上面的兄元素不浮动，浮动元素会被挡住

3、元素脱离文档流后，不再局限元素在文档流中的特点，行内可设宽高，块不再独占一行，行内块没有3像素问题

4、浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可以通过浮动来设置文字环绕图片的效果

三、高度塌陷

1、浮动带来的问题：高度塌陷

一般情况下，块元素高度如果不设置，会被内容撑开，此时设置其子元素浮动，子元素脱离文档流，不再占据原来在文档流中的位置，也就撑不开父元素的高度了，导致父元素高度的丢失，进而影响到整个页面的布局。

2、解决方案

（1）给父元素设置高度,最简单，最直接

（2）开启父元素的隐藏属性BFC ：overflow：hidden

（3）给父元素的最后添加一个块标签，清除浮动带来的影响

（4）定义类，添加空白表格，清除浮动: clear: ;

可选值

left：清除左侧浮动带来的影响

right：清除右侧浮动带来的影响

both：清除两侧浮动带来的影响

css 复制代码

      /* 解决外边距折叠 */
      .clear::before {
        content: "";
        display: table;
      }
      /* 解决高度塌陷 */
      .clear1::after {
        content: "";
        display: table;
        clear: both;
      }
      /* 整合以上2个类 */
      .clearfix::before,
      .clearfix::after {
        content: "";
        display: table;
        clear: both;
      }