浮动和清除浮动

浮动

块级元素同行显示

1. display：inline-block； 中间存在5px的间距，存在兼容问题
2. 浮动

浮动

• 可以让元素同行显示，排列不下自动换行

• 语法：

  float:left | right |none;
  

  • left :左浮动
  • right：右浮动
  • none：不浮动，默认值

• 特点：

  1. 浮动元素可以同行显示，排列不下会自动换行，不存在兼容问题
  2. 浮动元素会脱离文档流，在标准文档流之上
  3. 原来的空间不存在
  4. 行内元素设置浮动后，支持宽高

• 注意：

  • 只有设置了浮动的元素，才可以同行显示
  • 多个元素同时浮动，第一个浮动元素找父盒子的边界，后面的浮动元素找前面浮动元素的边界
  • 块级元素设置浮动后，如果不设置width，默认是auto，宽度由内容决定

标准文档流

• 概念：在页面布局过程中，元素按照从左到右，从上到下，块级元素独占一行，行级元素共享一行的排列规范

脱离文档流

• 概念：在页面布局过程中，元素不再遵循标准文档流，按照自己的排列规范来排列

浮动对非浮动的影响

• 非浮动元素会占用浮动元素原来的位置

• 非浮动元素里面的文本会被浮动元素挤出来

  • 实现图文混排

    <style>
        img{
            float: left;
            width: 60px;
        }
    </style>
    
    <img src="img/img-8.jpg" alt="">
    <p>
        特点： 浮动元素可以同行显示，排列不下会自动换行，不存在兼容问题 浮动元素会脱离文档流，在标准文档流之上原来的空间不存在行内元素设置浮动后，支持宽高注意：只有设置了浮动的元素，才可以同行显示多个元素同时浮动，第一个浮动元素找父盒子的边界，后面的浮动元素找前面浮动元素的边界块级元素设置浮动后，如不设置width，默认是auto，宽度由内容决定
    </p>
    

• 子元素浮动，父元素高度塌陷

清除浮动

• 通过clear属性来清除浮动，清除浮动元素对非浮动元素的影响

• 语法：

  clear：left | right |both；
  

  • left：清除左浮动的影响
  • right：清除右浮动的影响
  • both：清除左浮动和右浮动的影响

清除浮动的方法

1. 给受影响的元素添加 clear属性

2. 使用<br clear="all">将浮动元素和非浮动元素隔开

3. 使用空白的div添加clear样式将浮动元素和非浮动元素隔开

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

4. 给父元素添加伪元素选择器来清除浮动（推荐使用）

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

注意：overflow：hidden可以解决子元素浮动，父元素高度塌陷的问题，是取消浮动的影响，但并不是清除浮动，是借助BFC容器的特点，这个容器里面的浮动元素会参与父盒子的高度计算。