float 常見用法與問題--摘抄
float 屬性絕對是眾多切圖仔用的最多的 CSS 屬性之一，它的用法很簡單，常用值就 left、right、none 三個，但是它的特性你真的弄懂了嗎？
我會在這裏介紹我對 float 的認識與使用，以及使用過程中遇到的問題。
對 float 的認識
1. float 元素具有 BFC 模型特性
當給元素添加 float 屬性後，元素便會具有 BFC 模型的效果。比如給內聯元素 span 等添加 float 屬性後，內聯元素也可以設置寬高和 margin。
2. float 與 position
當給元素添加了絕對定位 absolute 或者 fixed 後，元素的浮動效果就會消失，即便 float 屬性設置在 position 屬性之後。
3. 脫離標準文檔流
浮動元素會脫離標準文檔流，會給它後面的兄弟元素造成影響，如果要清楚對兄弟元素的影響，只需要給緊鄰的兄弟元素添加 clear: both 就好，但是緊鄰的兄弟元素的 margin 依然是相對於父元素的。
4. 破壞父元素高度
當父元素沒有設置高度，也不是 BFC 模型時，如果給子元素添加浮動效果，那麽便會造成父元素高度的坍塌。
要清除浮動給父元素帶來的破壞效果，方案也有很多，最直接的是把父元素變成 BFC 模型的元素就行。
不過大家使用最多的方式應該是添加一個 .clearfix 的類，不過對於這個類的寫法有很多種，而我一般使用的是張鑫旭老師的方法，代碼量最少：
.clearfix {
zoom: 1;
}
.clearfix::after {
content: ‘‘;
display: table;
clear: both;
} 5. float 與 padding
浮動元素不會超過父元素的內邊距 padding。
利用第五點與第三點，我們在方便的實現一些布局效果並減少層級嵌套。
比如我們通常會遇到如下的樣式布局：
代碼實現：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>浮動</title>
</head>
<body>
<div class="container">
<p class="tt">1\. 這是標題</p>
<button class="btn">刪除</button>
<div class="con">
這裏是具體的內容
</div>
</div>
</body>
</html> .container {
width: 400px;
padding: 20px;
border: 1px solid #ccc;
}
.tt {
float: left;
margin: 0;
width: 200px;
overflow: hidden;
}
.btn {
float: right;
}
.con {
padding-top: 10px;
clear: both;
}標題欄既有文本也有刪除等按鈕，我們直接使用 float，而下面的內容部分我們通過 clear: both; 來讓顯示位置正確。標題欄部分和內容部分的間距則通過給 .con 元素添加 padding 而不是 margin 來控制，因為它的 margin 是相對於父容器的。
6. float 與 margin
兩個相鄰的浮動元素，當第一個浮動元素的寬度為100%時，第二個浮動元素會被擠到下面，通過添加負的 margin-left 或者 margin-right 值（絕對值最少等於它自身的寬度），可以使它回到第一行。
常見布局
利用這一點，我們也可以實現很多布局，比如：
在書寫html代碼時，我們通常的習慣根據UI樣式，從左往右來寫代碼，但有時候右側的內容比較重要，所以它的html結構需要放在左側內容上面，讓它更早的加載。
<div class="comment">
<!-- 右側重要內容 -->
<div class="content">
<div class="author">
<span class="name">哇哈哈</span>
<span class="date">2016-78-55</span>
</div>
<p class="text">吃的再多也不長胖，好愁人啊，怎麽能快速長胖呢，在線等，急！吃的再多也不長胖，好愁人啊，怎麽能快速長胖呢，在線等，急！吃的再多也不長胖，好愁人啊，怎麽能快速長胖呢，在線等，急！吃的再多也不長胖，好愁人啊，怎麽能快速長胖呢，在線等，急！吃的再多也不長胖，好愁人啊，怎麽能快速長胖呢，在線等，急！吃的再多也不長胖，好愁人啊，怎麽能快速長胖呢，在線等，急！吃的再多也不長胖，好愁人啊，怎麽能快速長胖呢，在線等，急！</p>
<div class="meta">
<span class="msg-tag">贊</span>
<span class="msg-tag">回復</span>
</div>
</div>
<!-- 左側內容 -->
<a href="#" class="avatar"><img src="images/header.jpg" alt="頭像"></a>
</div>* {margin:0; padding:0;}
li {list-style: none;}
a {text-decoration: none;}
body {font-family: ‘微軟雅黑‘;}
.wrap {
width: 800px;
margin: 50px auto;
}
.content {
float: right;
margin-left: 100px;
}
.date {
font-size: 14px;
color: #666;
}
.text {
margin: 20px 0;
}
.avatar {
float: left;
margin-right: -80px;
}
.avatar img {
width: 80px;
height: 80px;
border-radius: 50%;
}如上面圖的效果，盡管在UI上，.content 元素在 .avatar 右邊，但我們在 html 結構中，仍然需要把 .content 元素放到 .avatar 元素前面，這個時候就可以通過給 .content 元素設置為右浮動，然後給 .avatar 元素設置左浮動，再添加負 margin-right 值，讓它回到上面。
2. 右側定寬流式布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>test</title>
</head>
<body>
<div class="content">
<div class="box1">
<div class="inner"></div>
</div>
<div class="box2"></div>
</div>
</body>
</html>.content {
width: 500px;
overflow: hidden;
}
.box1 {
box-sizing: border-box;
float: left;
width: 100%;
height: 50px;
padding-right: 220px;
border: 1px solid #ccc;
}
.inner {
width: 100%;
height: 40px;
border: 1px solid #f23;
}
.box2 {
float: right;
width: 200px;
height: 30px;
margin-left: -100%;
border: 1px solid #2fe;
}float 常見用法與問題--摘抄