html代碼 CSS代碼 效果圖： 、 下麵介紹三種圍住浮動元素的方法。最終達成的效果都是： 方法一：為父元素添加 overflow:hidden //overflow：hidden聲明的真正用途是 1.防止包含元素被超大內容撐大。應用overflow：hidden之後，包含元素依然保持其特定的寬度 ...
html代碼
1 <body> 2 <section> 3 <img src="sea.png" alt="sea"> 4 <p>圖片標題</p> 5 </section> 6 <footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. </footer> 7 </body>
CSS代碼
1 p{ 2 margin:0; 3 } 4 img{ 5 float:left; 6 } 7 section{ 8 border:1px solid green; 9 margin:0 0 10px 0; 10 } 11 footer{ 12 background-color: #ccc; 13 }
效果圖：
、
下麵介紹三種圍住浮動元素的方法。最終達成的效果都是：
方法一：為父元素添加 overflow:hidden
1 section{ 2 border:1px solid green; 3 margin:0 0 10px 0; 4 overflow: hidden; 5 }
//overflow：hidden聲明的真正用途是 1.防止包含元素被超大內容撐大。應用overflow：hidden之後，包含元素依然保持其特定的寬度，而超大的子內容則會被容器剪切掉；2.它能可靠地迫使父元素包含其浮動的子元素。
方法二：同時浮動父元素
1 section{ 2 border:1px solid green; 3 margin:0 0 10px 0; 4 width:100%; 5 float:left; 6 } 7 footer{ 8 background-color: #ccc; 9 clear:left; 10 }
方法三：添加非浮動的清除元素
給父元素的最後添加一個非浮動的子元素，然後再清除該子元素。其中有兩種方案。
第一種：
簡單地在HTML中添加一個子元素，並給它應用clear屬性。
1 <body> 2 <section> 3 <img src="sea.png" alt="sea"> 4 <p>圖片標題</p> 5 <div class="clear"></div> 6 </section> 7 <footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</footer> 8 </body>
在此，為div添加了一個類，以便於在CSS中寫樣式。
1 div.clear{ 2 clear:left; 3 }
第二種：
如果你特別不想添加這個純表現性的元素，有一個更好的方法。
首先為section添加一個類clearfix
1 <section class="clearfix"> 2 <img src="sea.png" alt="sea"> 3 <p>圖片標題</p> 4 </section> 5 <footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</footer>
然後，再使用這個神奇的clearfix規則
1 .clearfix:after{ 2 content:"."; 3 display:block; 4 height:0; 5 visibility:hidden; 6 clear:both; 7 }
//這個clearfix規則最早是由程式員Tony Aslett發明的，它只添加了一個清除的包含句點作為非浮動元素。
