CSS浮动流

浮动

网页的布局方式

• 什么是网页的布局方式?

  • 网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的

• 标准流(文档流/普通流)排版方式

  • 其实浏览器默认的排版方式就是标准流的排版方式
  • 在CSS中将元素分为三类, 分别是块级元素/行内元素/行内块级元素
  • 在标准流中有两种排版方式, 一种是垂直排版, 一种是水平排版
    • 垂直排版, 如果元素是块级元素, 那么就会垂直排版
    • 水平排版, 如果元素是行内元素/行内块级元素, 那么就会水平排版

• 浮动流排版方式

  • 浮动流是一种"半脱离标准流"的排版方式
    • 浮动流只有一种排版方式, 就是水平排版. 它只能设置某个元素左对齐或者右对齐

• 注意点:

  • 浮动流中没有居中对齐, 也就是没有center这个取值
  • 在浮动流中是不可以使用margin: 0 auto;

• 特点:

  • 在浮动流中是不区分块级元素/行内元素/行内块级元素的
  • 无论是块级元素/行内元素/行内块级元素都可以水平排版
  • 在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高
  • 综上所述, 浮动流中的元素和标准流中的行内块级元素很像
• 浮动元素的脱标
• 什么是浮动元素的脱标?
  • 脱标: 脱离标准流
  • 当某一个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了一样, 这个就是浮动元素的脱标
• 浮动元素脱标之后会有什么影响?
  • 如果前面一个元素浮动了, 而后面一个元素没有浮动 , 那么这个时候前面一个元就会盖住后面一个元素
  • 浮动元素产生了浮动流，所有产生了浮动流的元素，块级元素看不到他们，产生了 bfc 的元素和文本类属性的元素（inline）以及文本都能看到浮动元素

清除浮动方法

• 把父级元素后边的伪元素调用出来 content=“”；，然后转为块级元素，再清除浮动。比如：

       div::after {

                      content: "";

                     display: block;

                     clear: both; }

• 给父级元素触发 bfc

        注意：凡是设置了 float：left/right 或者 position：absolute 的元素内部会自动把 他转化为行级块元素（inline-block）。