l 本章简介:
使用DIV+CSS进行网页布局实际就是使用CSS编排网页元素。
它首先对 div 标签进行分类，然后使用 CSS 对各个 div 进行CSS排版，最后在各个 div中编辑页面内容，这样就实现了 表现和内容分离。
今天将要介绍使用 display 改变元素特性来进行网页元素的编排，使用浮动编排网页元素
并且根据网页布局需要对浮动进行清除。
以及认识 display 和float 编排各自的优点和缺点，让大家合理的在不同的场合用不同的布局方式。
l 本章单词：
Display 显示
Block 块级元素
Inline 行内元素
Inline-block 行内块元素
Float 浮动
Left 左
Right 右
Clear 清除
Both 两边
Overflow 溢出
Hidden 隐藏
l 7.1 网页布局
我们见到的网站基本上包括网站导航、网页主体内容、网站版权三个部分。
虽然互联网中的页面基本包括上述三个部分，但在布局上各不相同，网页布局类型有
上左右下布局、上左中右下布局、左边固定右边自适应布局等
网页头部和底部其实都差不多，关键就在于中间的主体部分。
而主体部分常见的可以是两栏布局和三栏布局。
l 7.2 标准文档流
在进行网页编排之前先了解一个概念，那就是标准文档流。
标准文档流是指元素根据块元素或行内元素的特性按从上到下，从左到右的自然排列。
这也是元素的默认的排列方式。
l 7.3 display属性
大家已经知道标准文档流里有两种元素，一种是块级元素独占一行，比如 div
一种是行内元素，只占据本身自己元素的大小，比如 span 元素。
在 CSS中，display属性用于指定HTML标签的显示方式，可以把块级元素和行内元素之间来回转换。
display: block; 块级元素的默认值，元素被显示为块级元素，元素的前后带有换行符。
display: inline; 行内元素的默认值，元素被显示为行内元素，元素的前后没有换行符。
display: inline-block; 行内块元素，元素既有行内元素的特性，也具有块元素的特性
display: none; 设置元素隐藏，不会被显示。
l 7.4 float属性
想要实现浮动效果，需要在CSS中设置float属性，默认值 none,也就是标准文档流块级元素通常显示的情况
如果将 float 属性的值设置为left 和 right，元素就会向其父元素的左侧或者右侧浮动，同时默认的情况下，盒子的宽度不再伸展，而是根据盒子里面的内容和宽度来确定。
这样就能实现网页布局中的 “左中右” or “左右”布局类型。
Float属性在网页中起着十分重要的作用，它不仅能从全局来布局网页，还可以在网页中的
其他内容进行排版。
float: left; 让元素向左移动
float: right; 让元素向右移动
float: none; 默认值元素不浮动，并会显示在其文本中出现的位置。
设置浮动的元素会从标准文档流中脱离，只有里面的内容占据本身的空间
l 7.5 clear属性
由于某些元素设置了浮动之后，在页面排版的时候会影响其它元素的位置
如果子元素全部浮动了，父级元素将包不住子元素造成边框坍塌。
这时就需要清除浮动了
clear: left; 在左侧不允许浮动元素
clear: right; 在右侧不允许浮动元素
clear: both; 在左、右两侧不允许浮动
clear: none; 默认值，允许浮动元素出现在两侧。
l 7.6 解决父级边框塌陷的方法
除了使用 clear 属性给元素清除浮动来避免对其他元素造成的影响，还有其它几种方法
1. 浮动元素的后面加一个 DIV
这样的方式虽然解决了问题，但是会增加 HTML 不必要的代码量。
2. 设置父元素的高度
这种方式也能解决问题，但是设置高度后，会影响元素的可扩展性。
3. 父级添加overflow
使用 overflow 也可以用来清除浮动来扩展盒子的高度
这种方式不会产生冗余的标签，只需要设置外层盒子的 overflow 属性值为 hidden 即可
这种方法常用来设置外层盒子包含内层浮动元素的效果，防止父级边框塌陷。
overflow: visible; 默认值，内容不会被修剪，会呈现在盒子的外面
overflow: hidden; 内容会被修剪，并且其余的内容是不可见的
overflow: scroll; 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
overflow: auto; 如果内容被修剪，则浏览器会显示滚动条以便查看其余内容
4. 父类添加伪类 after
前面的三种方法，可以清除浮动让父级边框不塌陷，但是这三种方法各自有各自的缺陷，不能很完美地解决问题。
伪类 after 的意思是选择到class 类的后面元素，比如有个元素类名是 clear
Clear：after 的意思是选择类名 clear 后面的样式并添加样式。
.clear:after{ content: ''; 在 clear 类后面添加内容为空 display: block; 把添加的内容转化为块元素 clear: both; 清除这个元素两边的浮动 }
通过上面的介绍，我们知道了防止父级边框塌陷的四种方法
1. 浮动元素添加空DIV ，方式简单，但是会造成 HTML 代码冗余
2. 设置父元素的高度，方式简单，但是元素固定之后会降低元素可扩展性
3. 父级添加 overflow属性，方式简单，但是有下列列表的场景无法使用
4. 父级添加伪类 after，写法相比复杂一点，但是没有副作用，推荐使用。
l 7.7 inline-block 和 浮动的区别
到这里我们知道了 inline-block 和 浮动都可以让块元素排在一行，实现两栏或者三栏布局。
那么它们之间有什么优缺点呢？使用哪个更好呢？
1. inline-block可以让元素排在一行，并且支持高度和宽度，代码方便，添加该属性的元素还在标准文档流中。
但是位置不可控制，并且会解析空格。
2. float可以让元素排在一行，也支持高度和宽度，可以决定排列方向。
但是浮动之后的元素会脱离文档流，并对周围的元素产生影响。
无论哪种方法都能实现布局效果，它们也都有各自的优势和不足。
我们需要正确理解两种方法，根据自己的需求来选择合适的方法进行布局。
l 7.8 本章总结
1. 网页中常用的布局类型为上中下结构、两栏布局、三栏布局
2. 认识并理解标准文档流
3. 学会使用 display 来改变元素的特性
4. 学会使用 float 属性来布局网页
5. 理解 clear 属性的作用
6. 学会使用四种清除浮动的方法，并且知道使用的场景
7. 会正确使用 display：inline-block和 浮动来完成布局，理解它们的优缺点。