HTML----浮动
页面布局
标准文档流
指元素根据块元素或行内元素的特性按从上到下,从左到右的方式自然排列。这也是元素默认的排列方式。
标准文档流的组成
-
块级元素(block)
<h1>…<h6>、<p>、<div>、列表
-
内联元素(inline)
<span>、<a>、<img/>、<strong>…
内联标签可以包含于块级标签中,成为它的子元素,而反过来则不成立。
display属性
值 | 说明 |
---|---|
block | 块级元素的默认值,元素会被显示为块级元素,该元素前后会带有换行符 |
inline | 内联元素的默认值,元素会被显示为内联元素,该元素前后没有换行符 |
inline-block | 行内块元素,元素既具有内联元素的特性,也具有块元素的特性。 |
none | 设置元素不会被显示 |
display特性
- 块级元素与行级元素的转变(block、inline)
- 控制块元素到一行(inline-block)
- 控制元素的显示和隐藏(none)
将块级元素控制到一行的方法除了inline-block之外还有float.
浮动
float属性
属性值 | 说明 |
---|---|
left | 元素左浮动 |
right | 元素右浮动 |
none | 默认值。元素不浮动,并会显示在其文本中出现的位置 |
清除浮动
clear属性
值 | 说明 |
---|---|
left | 在左侧不允许浮动元素 |
right | 在右侧不允许浮动元素 |
both | 在左、右两侧不允许浮动元素 |
none | 默认值。允许浮动元素出现在两侧 |
示例
img{
clear:both;
}
解决父级边框塌陷
clear属性可以清除浮动对其他元素造成的影响,但解决不了父级边框塌陷的问题。
方法:
-
浮动元素后面加空div
简单,空div会造成HTML代码冗余
<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> .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> #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; }
-
父级添加伪类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; /*清除这个元素两边的浮动*/ }
inline-block 和float的区别
display:inline-block
- 可以让元素排在一行,并且支持宽度和高度,代码实现起来方便。
- 位置方向不可控,会解析空格
- IE6、IE7上不支持
float
- 可以让元素排在一行并且支持宽度和高度,可以决定排列方向。
- float浮动后元素脱离文档流,会对周围元素产生影响,必须在他的父级上添加清除浮动的样式。