标准文档流
标准文档流组成
块级元素（block）
-
-
- <h1>…<h6>、<p>、<div>、列表
-
内联元素（inline）
-
-
- <span>、<a>、<img/>、<strong>...
-
经验：
内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立
display属性
示例
display:inline;
display:inline;
display:inline-block;
display:none; //隐藏起来
display特性
块级元素与行级元素的转变（block,inline）
控制块元素排到一行（inline-block）
控制元素的显示和隐藏（none）
浮动
float属性
示例:
……
<body>
<div id="father">
<div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
<div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
<div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
<div class="layer04">浮动的盒子……</div>
</div>
</body>
</html>
设置浮动后会脱离文档 提高层级
display:Inline-block和float的区别：
display:inline-block
可以让元素排在一行，并且支持宽度和高度，代码实现起来方便。
位置方向不可控制，会解析空格。
IE 6，IE 7以上支持
Float
可以让元素排在一行并且支持宽度和高度，可以决定排列方向。
float浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式。
清除浮动
clear属性
示例：img{
clear:both; //清除左右浮动
}
解决父级边框塌陷的方法
<div id="father">
<div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
<div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
<div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
<div class="layer04">浮动的盒子……</div>
</div>
#father {height: 400px; border:1px #000 solid; }
解决父级边框塌陷的方法
父级添加overflow属性
<div id="father">
<div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
<div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
<div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
<div class="layer04">浮动的盒子……</div>
</div>
#father {overflow: hidden;border:1px #000 solid; }
overflow属性
解决父级边框塌陷的方法
父级添加伪类after
<div id="father" class="clear">
<div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
<div class="layer02"><img src="image/photo-2.jpg" alt="图书" /></div>
<div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
<div class="layer04">浮动的盒子……</div>
</div>
.clear:after{
content: ''; /*在clear类后面添加内容为空*/
display: block; /*把添加的内容转化为块元素*/
clear: both; /*清除这个元素两边的浮动*/
}
小结：
- 清除浮动，防止父级边框塌陷的四种方法
- 浮动元素后面加空div
- 简单，空div会造成HTML代码冗余
- 设置父元素的高度
- 简单，元素固定高会降低扩展性
- 父级添加overflow属性
- 简单，下拉列表框的场景不能用
- 父级添加伪类after
- 写法比上面稍微复杂一点，但是没有副作用，推荐使用
- 浮动元素后面加空div
总结
