文档流、浮动流及消除浮动

一、文档流(普通流/标准流)

　　*浏览器默认的标准就是文档流

　　*在CSS中分为块元素(垂直排版)、行内块元素（水平排版）、行内元素()。不同的元素有自己的排布规则

二、浮动流

1、

原文规范：In the float model, a box is first laid out according to the normal flow, then
taken out of the flow and shifted to the left or right as far as possible.

意思是：1）元素浮动后的位置由其浮动前在文档流中的位置决定(在文档流中是第几行，浮动后就在第几行)

　　　　2）浮动后会尽量向最左侧/最后侧放置，直到遇到元素边框或者其他浮动元素

　　*浮动元素字围现象：因为浮动是一种半脱离文档流的形式，元素会脱离文档流DOM，其他元素会占用它的位置。但是文字会依然为其留下位置

　　　　常应用在图文排版中

　　*只有水平排版(后浮动的元素在先浮动元素的后面，直到放置不开换行，所以浮动流中没有块元素与行内元素之分，都类似与行内块元素)

2、清除浮动方法

浮动影响：

　　脱标（脱离标准流，造成布局混乱，高度塌陷）；字围（文字围绕浮动元素）；收缩（不区分行内元素与块元素）；贴边（向左或者向右）

清除浮动方法：

 　　1）*clear：left/right/both 实际上both就是消除对它影响最大的一侧   不推荐使用，因为clear本质就是闭合盒子不让内部的子元素出来

　 　2）父元素设置over-flow：hidden.auto。不推荐使用，无法显示溢出的元素

 　　3）使用外墙法（在浮动子元素的父元素后面添加一个空白的div，对其设置clear：both）

　　　　　　缺点：margin失效；父元素高度依然丧失

　　　　　　

 

 

　　　4）内墙法:box1可以使用margin，并且会有高度。缺点：都需要添加无用的结构，还需要设置clear，不推荐使用

　　　　

 

　　　5）*通过before伪类消除，推荐使用

　　　　

　注意：

　　*display：inline-block/table/table-cell/table-captions

　　*float:left/right

　　以上方式会开启BFC，但是依旧会造成布局混乱，不能用于清除浮动

转载于:https://www.cnblogs.com/qqinhappyhappy/p/11546034.html