HTML（第七章） 标签（空格分隔）： 浮动

HTML（第七章）

标签（空格分隔）： 浮动

---

标准文档流组成
块级元素（block）
<h1>…<h6>、<p>、<div>、列表
内联元素（inline）
<span>、<a>、<img/>、<strong>

display属性

规定元素应该生成的框的类型。
|值|说明|
|-||
|none| 此元素不会被显示。|
|block| 块级元素的默认值，此元素将显示为块级元素，此元素前后会带有换行符。|
|inline| 内联元素的默认。此元素会被显示为内联元素，元素前后没有换行符。|
|inline-block| （行内块元素。）元素既具有内联元素的特性，也具有块元素的特性|
注：inline-block 控制块元素排到一行 none控制元素的显示和隐藏
inline-block 排列到一行时块元素之间有间隔，消除不掉，尽量不用

float属性

指定一个盒子（元素）是否应该浮动。
|值|说明|
|-||
|left| 元素向左浮动。|
|right| 元素向右浮动。|
|none| 默认值。元素不浮动，并会显示在其在文本中出现的位置。|
float 浮动排列到一行时块元素之间没有间隔，推荐使用

• display:inline-block
  可以让元素排在一行，并且支持宽度和高度，代码实现起来方便
  位置方向不可控制，会解析空格
  IE 6、IE 7上不支持
• float
  可以让元素排在一行并且支持宽度和高度，可以决定排列方向
  float 浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式

清除浮动

因为浮动元素脱离标准文档流
clear属性指定段落的左侧或右侧不允许浮动的元素。
clear属性可以清除浮动对其他元素造成的影响

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素
none	默认值。允许浮动元素出现在两侧。

解决父级边框塌陷的方法1：
浮动元素后面加空div

.clear{  clear: both;  margin: 0; padding: 0;}

<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 class="clear"></div>
  
</div>

解决父级边框塌陷的方法2：
设置父元素的高度

#father {height: 400px; border:1px #000 solid; }

<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>

解决父级边框塌陷的方法3：
父级添加overflow属性

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

#father {overflow: hidden;border:1px #000 solid; }
<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>

解决父级边框塌陷的方法4：
父级添加伪类after
.clear:after{
content: “”; /在clear类后面添加内容为空/
display: block; /把添加的内容转化为块元素/
clear: both; /清除这个元素两边的浮动/
}

<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>

总结

• 清除浮动，防止父级边框塌陷的四种方法
• 浮动元素后面加空div
  简单，空div会造成HTML代码冗余 一般
• 设置父元素的高度
  简单，元素固定高会降低扩展性 太死板不适用
• 父级添加overflow属性
  简单，下拉列表框的场景不能用 相当于剪切不推荐使用
• 父级添加伪类after
  写法比上面稍微复杂一点，但是没有副作用，推荐使用