float與margin
兩個相鄰的浮動元素，當第一個浮動元素（不論是左浮動還是右浮動）的寬度為100%時，第二個浮動元素會被擠到下面，通過添加負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值，讓它回到上面。
1.左右兩側都不定寬
效果圖：
html代碼：
<div class="comment">
<a href="#" class="avatar"><img src="images/header.jpg" alt="頭像"></a>
<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>
</div>
核心點：
.avatar元素左浮動，.content元素的display屬性設為table-cell，其實這里的.content元素不一定非要設置display為table-cell才行，只要是能觸發BFC/haslayout的就行，比如：
float:left/right position:absolute/fixed overflow:hidden/scroll(IE7+) display:inline-block/table-cell(IE8+)
不過因為這里的.content元素是自適應的，不能定寬，而且里面包含塊級元素，所以只能設置overflow屬性。
【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。