CSS文档定位:浮动
浮动的特点
- 浮动的元素会向左或者向右移动直到它的外边缘接触容器框(containing block)的边缘或者另外一个浮动元素的外边缘,因此浮动元素是不会浮动到中间的。
- 如果没有足够的水平空间让浮动元素占据,浮动元素将向下移动,直到下方空间足够容纳或者下方已经没有浮动元素。
- 因为浮动已经脱离普通流,所以非定位的非浮动块级元素会表现得浮动元素没有存在一样,但是inline box元素(包括普通inline box元素、块级元素内的inline box元素、浮动元素中的inline元素)依然会为浮动元素让出空间,但当浮动元素的外高度(包括margin和border)为0时,inline box元素则不会让出空间。
- 浮动元素的margins不会和相邻元素的重叠(collapse)。
- 根元素<html>不能浮动。
- 一个行内元素(inline element)或者一个块级元素(block element)浮动后同样会表现得和行内块级元素相似,可以设置高度和宽度,不设置时默认表现和行内元素一样,浮动元素内的容器框(containing block)会水平排列,可能会挤占相邻的浮动元素外的空间(故会有人建议应该为浮动元素设置宽度,图片等一些隐含宽度的元素则另外考虑),元素不再占领一行等等。
1 <div class="container"> 2 <div class="floatdiv">--浮动div--</div> 3 <div class="floatdiv">..浮动div..</div> 4 <div class="nofloatdiv">(不浮动div)</div> 5 </div>
CSS:
1 .container { 2 border: 1px solid #000; 3 } 4 .floatdiv { 5 background-color: #ccc; 6 float: left; 7 } 8 .nofloatdiv { 9 background-color: #aaa; 10 }
1 <div class="container"> 2 <div class="floatdiv_1">浮动div.1</div> 3 <div class="floatdiv_2">浮动div.2</div> 4 <div class="floatdiv_3">浮动div.3</div> 5 </div>
1 .container { 2 border: 1px solid #000; 3 width: 400px; 4 overflow: hidden; 5 *zoom:1;/*兼容IE6,IE7*/ 6 } 7 .floatdiv_1 { 8 background-color: #999; 9 float: left; 10 height: 50px; 11 width: 150px; 12 } 13 .floatdiv_2 { 14 background-color: #bbb; 15 float: left; 16 height: 30px; 17 width: 150px; 18 } 19 .floatdiv_3 { 20 background-color: #ddd; 21 float: left; 22 height: 30px; 23 width: 150px; 24 }
1 .container { 2 border: 1px solid #000; 3 overflow: hidden; 4 *zoom:1;/*兼容IE6,IE7*/ 5 }
HTML:
1 <div class="container"> 2 <div class="floatdiv">浮动div</div> 3 <div class="nofloatdiv">不浮动div</div> 4 </div>
1 .container { 2 border: 1px solid #000; 3 width: 400px; 4 } 5 .floatdiv { 6 background-color: #ccc; 7 float: left; 8 height: 50px; 9 } 10 .nofloatdiv { 11 background-color: #aaa; 12 }
1 .container { 2 border: 1px solid #000; 3 width:400px; 4 overflow: hidden; 5 *zoom:1; 6 }
1 <div class="container"> 2 <div class="floatdivLeft">左浮动div</div> 3 <div class="floatdivRight">右浮动div</div> 4 <div class="footdiv">页脚</div> 5 </div>
1 .container { 2 border: 1px solid #000; 3 text-align: center; 4 width: 404px; 5 overflow: hidden; 6 *zoom: 1;/*兼容IE6,IE7*/ 7 } 8 .floatdivLeft { 9 border: 1px solid #000; 10 float: left; 11 width: 100px; 12 height: 100px; 13 } 14 .floatdivRight { 15 border: 1px solid #000; 16 float: right; 17 width: 300px; 18 height: 100px; 19 } 20 .footdiv { 21 background-color: #eee; 22 height: 50px; 23 }
1 .footdiv { 2 background-color: #eee; 3 height: 50px; 4 clear: both; 5 }
1 <div class="container"> 2 <div class="floatdivLeft">左浮动div</div> 3 <div class="floatdivRight">右浮动div</div> 4 <div class="clearfix"></div> 5 <div class="footdiv">页脚</div> 6 </div>
1 .clearfix { 2 clear: both; 3 }
1 .clearfix:after { 2 content: "."; 3 display: block; 4 height: 0; 5 clear: both; 6 visibility: hidden; 7 }
1 .clearfix{ 2 *display: inline-block; 3 }
1 .clearfix{ 2 *zoom:1; 3 }
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。