第七章

第七章##

浮动

1.标准文档流

1.块级元素（block）
<h1>...<h6>
<p>
<div>
列表

2.内联元素（inline）
<span>
<a>
<img/>
<strong>
...

2.display属性

block              块级元素的默认值，元素会被显示为块级元素，该元素前后带有换行符
inline             内联元素的默认值，元素会被显示为内联元素，该元素前后没有换行符
inline-block       行内块元素，元素既具有内联元素的特性，也具有块元素的特性（使块元素排在一行）
none               设置元素不会被显示

特性：块级元素与行级元素的转变（block、inline）；
      控制块元素排到一行（inline-block）；
      控制元素的显示和隐藏（none）

3.float属性

left               元素向左浮动
right              元素向右浮动
none               默认值，元素不浮动，并会显示在其文本中出现的位置

4.边框塌陷

边框塌陷不能被彻底解决，所有方案只能是弥补！

1.外边距型坍塌
当父元素和子元素同时设定上下外边距时，两者以窗口为基准，同时适用数字最大的外边距，画面显示效果为父元素和子元素的上边框重合，形成坍塌。
这并非为语句错误，而是有意为之的设定，可通过适当的方式改变显示效果，而不能消除这个现象的存在。

2.浮动型坍塌
当子元素设定成浮动时，由于该子元素不在存在于父元素的文档流中，姑不再被父元素的边框所约束，亦不会以子元素的边框大小撑起父元素边框，形成坍塌。
这是由于子元素浮动后与父元素不在同一“图层”上，故不被约束。
但子元素之间的位置关系依然保持，不会因为浮动而变化。

5.清除浮动

用于解决子元素之间因为浮动产生的位置关系变化

left                 在左侧不允许浮动元素
right                在右侧不允许浮动元素
both                 在左、右两侧不允许浮动元素
none                 默认值，允许浮动元素出现在两侧

6.解决父级边框塌陷

1.浮动元素后加空<div>
例：<div>
  <div class="fudong">浮动</div>
  <div class="clear"></div>
</div>
.clear{  clear: both;  margin: 0; padding: 0;}

2.设置父元素高度
例：#father {height: 400px; border:1px #000 solid; }

3.父级添加溢出属性
例：#father {overflow: hidden;border:1px #000 solid; }

visible          默认值，内容不会被修剪，会呈现在盒子之外
hidden           内容会被修剪，并且其余内容是不可见的
scroll           内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto             如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

4.父级添加伪类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;         /*清除这个元素两边的浮动*/
}

注：以链接格式的形式实现

7.inline-block和float的区别

display:inline-block
可以让元素排在一行并且支持宽度和高度，代码实现起来方便；
位置方向不可控制，可以添加空格；
IE 6、IE 7上不支持

float 
可以让元素排在一行并且支持宽度和高度，可以决定排列方向；
位置方向可控制，但不可以添加空格；
float 浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式