HTML、CSS、浮动

《浮动》
1.需求，网站布局如何实现？
a、那通常由上中下三个大的区域组成
b、中间的主体部分内容复杂繁多，通常又会分成左右，或者左中右
c、那如何上主体分成左中右？（表格？div？）
2.表格布局是以前的老的套路，现在不推荐使用
a、代码繁琐
b、可读性差
c、解析效率不如div
d、不够灵活
3.div+css布局是现在的流行
a、用div来分块，再通过css来控制外观和位置
b、div+css布局不是说只用div，而是用div这一类元素布局，其他的header、section也用
c、其他元素根据情况依然用，p，ul，form
d、table不是不用，而是不用来做布局，或者尽量少用table布局
4.标准文档流
a、元素根据自身特性排布
b、有的元素独占一行
c、有的元素可以一行排列
d、总体方向是从上到下，从左到右，满了换行
5.如何解决div这一类元素不能一行显示的问题？

二、display属性的使用(display：显示）
1.块元素（block：块）（header/section/article/footer/p/table/h1~h6/div/nav）
a、独占一行
b、默认的宽度是100%
c、可以设置宽高
d、display属性为block
2.内联元素（行内元素）（span/strong/em/label/a/input/select/img）
a、不独占一行
b、流式排布，满了自动换行
c、不能设置宽高
d、display属性为inline
3.混合模式
a、对象还是按内联元素排布
b、但是对象的内容是按块元素风格设置
c、既不会独占一行，又可以设置宽高
d、display属性设置为inline-block
4、可以通过修改元素是display属性，将元素进行块元素和内联元素的切换
5.display属性设置为none表示隐藏元素

三、浮动float
1.要解决块元素一行显示，除了用上面的display:inline-block，还可以用float浮动实现
2.float：浮动
a、none，默认值，即不浮动，保持标准的文档流
b、left，元素向左浮动
c、right，元素向右浮动
3.浮动的本质：
a、浮动元素脱离原有的标准文档流
b、漂浮于原有元素的上一个层面
c、根据浮动的方向定位于父元素的左上角或者右上角
d、多个浮动元素会按照流式布局依此排列下去
4.综合案例，通过浮动实现照片列表效果
5.浮动会带来新的问题，父元素无法正确识别自身的高度，即边框塌陷

四、清除浮动
1.父元素边框塌陷的原因：子元素浮动了，脱离了标准文档流，父元素无法识别子元素的存在
2.某些元素的浮动，在页面排版时会影响其他元素的位置
3.clear属性清除浮动
a、none，默认值，允许元素浮动
b、left，清除左浮动
c、right，清除右浮动
d、both，清除左右浮动
4.在父元素末尾添加一个空元素，通过clear属性专门用于清除浮动(style=clear:both;)
5.设置父元素的高度可以解决边框塌陷的问题，不推荐
6.通过给父元素设置overflow属性来清除浮动
a、不会产生冗余标签
b、设置为hidden，可以清除浮动，让父元素正确识别自身高度
7.overflow属性的其他用法：
a、visible 默认值，显示超出的部分
b、hidden 隐藏超出的部分（溢出隐藏）
c、scroll 显示滚动条，以滚动体的方式来滚动查看
d、auto 自动，即超出的情况才显示滚动条
8.通过:after伪类元素实现清除浮动
a、:after表示在该元素的所有子元素的末尾添加一个节点
b、通过content来设置节点的文本内容
c、content属性不能省略，即便没有内容，也要设置为空字符串
d、可以依赖这个:after节点来实现浮动的清除
e、清除浮动的时候除了设置clear，还要把它变为block元素
clear:both; display:block;
f、:before的用法和:after一样，只不过是添加在最前面

五、inline-block和float的区别
1.inline-block:
a、可以让元素一行显示，且可以设置宽高
b、不会脱离标准文档流
c、不会清除浮动
d、代码实现方便
e、但位置方向不可控制，只能从左到右
f、会解析空格，如果不需要空格，需要把字体大小设置为0
g、老版本的浏览器（IE6/IE7）不支持此属性
2.float:
a、可以让元素一行显示，且可以设置宽高
b、可以决定排列的方向，即左浮动或者右浮动
c、会脱离标准文档流，会对其他元素有影响
d、必须清除浮动
e、总体用的较多