CSS的浮动

对于浮动始终非常迷惑，可能是自身理解能力差，在这些天在逆战班里终于弄明白了浮动的基本原理，与大家分享一下

浮动和绝对定位一样，都让那个元素脱离了原始的文档流。
文档流是什么：指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。同时也是默认的排序方式 这就是标准的文档流

其中块元素排在一行的办法有两种：1.inline-block 2.float（浮动）

float 属性 ：
left ： 元素向左移动
riight ：元素向右移动
none ：默认值 。元素不浮动，并显示了在文本中的位置

设置浮动以后依次浮动之后会跟在前面浮动的元素后面，并且浮动以后层级提高，后面的元素会排上去，浮动元素有可能会盖在未浮动元素的上面。

示例

未设置浮动


设置左浮动

d2.d3.d4设置左浮动

d2 d3设置右浮动

** float的特点为**

①可以让元素排在一行并且支持宽度和高度，可以决定排列方向

②float浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式

假如d3 d4元素是浮动的，如果d2元素不是浮动的，那么浮动元素会在未浮动的下面出现
示例

同理可得
假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)

那么问题来了 为什么外面有边框时候 所有元素浮动的时候 边框会塌陷呢？

浮动元素脱离了标准的文档流，父容器里没有了内容，于是就变成了最上面的那个黑框

解决办法

清除浮动

Clear属性
left：在左边不允许浮动
right：在右边不允许浮动
both ： 在左右两侧不允许浮动元素
none：默认值 允许浮动出现在两侧

示例

清除左浮动


解决父级边框塌陷办法
1.浮动元素后面加空 div

这种的弊端就是太多的空元素 会造成阅读的困难

2.设置父容器的高度

这种方式弊端主要就是不灵活，高度不可控

3.父容器添加overflow属性


优缺点：很完美，但是属性太多；不好分别。

4.父容器里添加伪类after


目前最好的方法，企业里都这么用 (推荐使用）