详解浮动

详解浮动

1. 浮动元素处于什么样的流？

《CSS 权威指南》中说，浮动元素同时处于（常规）流内和流外

• 如何理解？
  • 浮动元素不影响块级元素的布局（换句话说就是块级元素会当浮动元素不存在）
  • 浮动元素会影响行内元素的布局，从而间接影响块级元素的布局

2. 浮动与定位不能一起用

• 如果一起使用，浮动失效、定位生效
• 但是浮动与相对定位可以一起使用

3. 浮动元素的摆放方式

• 尽量靠上
• 尽量靠左
• 不能超过包含块
• 不能超过所在行的最高点
• 不能超过它前面的浮动元素的最高点
• 行内元素绕着浮动元素摆放
  • 行内元素会出现在左浮动元素的右边及右浮动元素的左边
  • 左浮动元素的左边及右浮动元素的右边不会摆放浮动元素

4. 浮动的清除

• 浮动的清除指块框下移直到某一边（两边）没有浮动元素为止
• clear 只用于在常规流里面的块级元素
  clear: none | left | right | both;
• left 指从右向左看

5. 浮动的闭合

• 解决方式

  • table
    • display：table | table-cell
  • BFC
    • overflow：hidden
    • display：flow-root
    • 包含块自身浮动

      div {
        float: left;
      }
      

  • 伪元素

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

  • 行内元素

    a {
      display: block;
      clear: both;
    }