float 屬性：
定義元素向哪個方向浮動。在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。Float的屬性值可以為：left、right、none、inherit等。
注意：
假如在一行上不夠容納整個浮動元素，則該元素會自動跳到下一行，依次往下跳，直到空間足夠為止。
例如：
<style>
.content{
width:800px;
float:left;
border:1px solid #000;
}
.left,.right{
width:500px;
height:200px;
border:1px solid #666;
}
.left{
float:left;
}
.right{
float:right;
}
</style>
<body>
<div class="content">
<div class="left">向左浮動</div>
<div class="right">向右浮動</div>
</div>
</body>
// 元素right最終在left下方。
1.float元素擋住了普通元素。
例如：
<style>
.content{
height:600px;
border:1px solid #CCC;
}
.left{
width:20%;
height:400px;
float:left;
border:1px solid #CCC;
}
.right{
width:20%;
height:400px;
float:right;
border:1px solid #CCC;
}
.main{
margin-left:21%;
margin-right:21%;
height:200px;
border:1px solid #CCC;
}
.footer1{
height:100px;
border:1px solid #CCC;
}
</style>
<body>
<div class="content">
<div class="left">left</div>
<div class="right">right</div>
<div class="main">main</div>
<div class="footer1">footer沒有清除浮動的狀態</div>
</div>
</body>
// left和right元素將漂浮在footer1元素上面，擋住了footer1的左右。
解決方法：采用clear屬性清除浮動。
例如：
<style>
.content{
height:600px;
border:1px solid #CCC;
}
.left{
width:20%;
height:400px;
float:left;
border:1px solid #CCC;
}
.right{
width:20%;
height:400px;
float:right;
border:1px solid #CCC;
}
.main{
margin-left:21%;
margin-right:21%;
height:200px;
border:1px solid #CCC;
}
.footer2{
height:100px;
clear:both;
border:1px solid #CCC;
}
</style>
<body>
<div class="content">
<div class="left">left</div>
<div class="right">right</div>
<div class="main">main</div>
<div class="footer2">采用clear清楚浮動後的狀態，footer元素出現在底端而且上面有float元素</div>
</div>
</body>
2.普通元素包含了浮動元素時，如果浮動元素高大於普通元素，則浮動元素將會溢出普通元素的范圍。
注意：接下來的例子均以浮動一張較大的圖片為例，可以自行鏈接一張圖片。
例如：
<style>
img{
float:left;
}
h1{
border:1px solid #000;
}
</style>
<body>
<div class="content1">
<h1><img src="img.jpg" />未處理</h1>
<p>如果非浮動元素中有高於它的浮動元素時，浮動元素會超出非浮動元素的范圍。
例如：圖片高度超出了h1標簽的高度</p>
</div>
</body>
解決方法1：加大父級元素高度，但擴展性不好，因為有時不能完全確定浮動元素的寬高。
<style>
img{
float:left;
}
h1{
height:300px;
border:1px solid #000;
}
</style>
<body>
<div class="content">
<h1><img src="img.jpg" />加大父級元素高度。</h1>
</div>
</body>
解決方法2：采用設置浮動元素的父級元素。
<style>
img{
float:left;
}
h1{
float:left;
border:1px solid #000;
}
</style>
<body>
<div class="content">
<h1 class="h1float"><img src="img.jpg" />采用設置浮動元素的父級元素</h1>
</div>
</body>
解決方法3：采用在浮動元素尾部增加設置了浮動的br元素。
<style>
img{
float:left;
}
h1{
border:1px solid #000;
}
br{
clear:both;
}
</style>
<body>
<div class="content">
<h1><img src="img.jpg" />采用增加設置浮動的br標簽<br /></h1>
</div>
</body>
解決方法4：采用給父級元素加overflow。
<style>
img{
float:left;
}
h1{
overflow:hidden;
border:1px solid #000;
}
</style>
<body>
<div class="content">
<h1 class="h1overflow"><img src="img.jpg" />采用給父級元素加overflow</h1>
</div>
</body>
解決方法5：加類名clear，采用after偽類統一處理。（比較推薦）
<style>
img{
float:left;
}
h1{
border:1px solid #000;
}
.clear:after{
content:"";
display:block;
clear:both;
}
</style>
<body>
<div class="content">
<h1 class="clear"><img src="img.jpg" />加類名clear，采用after偽類統一處理</h1>
</div>
</body>
解決方法6：采用dispay:inline-block;但是margin：auto會失效。
<style>
img{
float:left;
}
h1{
display:inline-block;
border:1px solid #000;
}
</style>
<body>
</div>
<div class="content">
<h1 class="h1dispay"><img src="img.jpg" />采用dispay:inline-block;</h1>
</div>
</body>
[聲明]:本博所有文章版權歸作者所有(除特殊說明以外)，轉載請注明出處.