什么是文档流

文档流处在网页的最底层，它表示的是一个页面中的位置即元素盒子按照规定的默认方式排列。

元素在文档流中默认排列方式：

1.块元素：块元素在文档流中会独占一行，块元素会自上向下顺序排列

2.行内元素：行内元素在文档流中只占自身的大小，会默认从左向右顺序排列，碰到父元素边缘则自动换行

CSS提供了3种传统布局的方式简单理解就是盒子如何进行排列顺序：文档流，浮动以及定位

浮动的介绍

1.浮动的应用：可以让多个块级元素在一行内排列显示。所以网页布局中，多个块级元素纵向排列用文档流，多个块级元素横向排列用浮动。

2.什么是浮动：元素的浮动是指设置了浮动属性的元素会脱离文档流的默认排列方式，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止就是浮动的元素外边框会挨着父元素左边或右边排列，如果之前有浮动的元素会挨着浮动的元素排列。

3.浮动的特性：

1）浮动的元素会脱离文档流（脱标），移动到指定的位置，浮动的盒子不再保留原先的位置。但它还是会影响到后面的文档流中的排版

2）给多个元素设置浮动，浮动的元素会一行内显示且元素顶部对齐排列。

ps：浮动的元素是互相贴在一起的之间不会有缝隙，如果父级元素宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐显示。

3）浮动的元素会具有行内块元素的特性，任何元素都可以浮动，不管浮动之前元素的显示模式是什么，添加浮动之后该元素就具有行内块元素的特性。

ps：如果块级元素没有设置宽度默认宽度是和父级一样宽，但是添加了浮动之后，其宽度大小就会根据内容决定。行内元素直接设置宽高是无效的，但是添加了浮动之后就可以设置宽高了

选择器 {
    float: 属性值;
}

为了约束浮动元素的位置，网页中布局一般采取得策略是：先用文档流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。不管这么浮动，都在父元素的盒子里面。如果父元素没有高度，浮动的子元素将不会撑开父元素的高度，这就是高度塌陷。

ps：浮动使用的原则，一般是一起浮动。一个元素浮动了，理论上其他的兄弟元素也要浮动。因为浮动的盒子只会影响浮动盒子后面的文档流不会影响前面的文档流，会显得布局很乱。

因为如果父元素没有高度，浮动的子元素将不会撑开父元素的高度，这就是高度塌陷，而网页布局中理想的状态是让子盒子撑开父盒子的高度，所以需要清除浮动。

清除浮动的本质是清除浮动元素造成的影响，如果父盒子本身有高度，则不需要清除浮动，没有高度就需要清除浮动，这样浮动的子盒子的高度才会撑开父盒子的高度，父盒子有了高度就不会影响下面的文档流显示。

选择器{
    clear:both
}

属性主要有三个值

left：清除左侧浮动的影响

right：清除右侧浮动的影响

both：同时清除左右两侧浮动的影响（几乎只用它，更方便）

1.额外标签法也称隔墙法：就是在浮动元素的末尾添加一个空的标签，给浮动子盒子后加一个兄弟空标签（必须是块级标签），给空标签加clear：both的属性，会多加一个标签

2.父级元素添加overflow属性，将属性值设置为hidden，auto，或scroll都可以，是给父级元素添加。但是当子盒子高度需要超出父元素高度时，无法显示父元素溢出的部分

3.父级元素添加after伪元素，也是给父级元素添加clearfix类名，没有增加新标签。

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

4.只需要给父元素加上高度，但是会导致布局不是很灵活

5.设置父元素dispaly： inlin-block，但是会影响到后面的布局