詳解css中的float
我要評(píng)論float與margin
兩個(gè)相鄰的浮動(dòng)元素，當(dāng)?shù)谝粋€(gè)浮動(dòng)元素（不論是左浮動(dòng)還是右浮動(dòng)）的寬度為100%時(shí)，第二個(gè)浮動(dòng)元素會(huì)被擠到下面，通過添加負(fù)margin-right值（絕對(duì)值最少等于它自身的寬度），可以使它回到第一行。
在書寫html代碼時(shí)，我們通常的習(xí)慣根據(jù)UI樣式，從左往右來寫代碼，但有時(shí)候右側(cè)的內(nèi)容比較重要，所以它的html結(jié)構(gòu)需要放在左側(cè)內(nèi)容上面，讓它更早的加載，比如：
左側(cè)定寬流式布局
<div class="comment">
<!-- 右側(cè)重要內(nèi)容 -->
<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">回復(fù)</span>
</div>
</div>
<!-- 左側(cè)內(nèi)容 -->
<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右邊，但我們?cè)趆tml結(jié)構(gòu)中，仍然需要把.content元素放到.avatar元素前面，這個(gè)時(shí)候就可以通過給.content元素設(shè)置為右浮動(dòng)，然后給.avatar元素設(shè)置左或者右浮動(dòng)，再添加負(fù)margin-right值，讓它回到上面。
1.左右兩側(cè)都不定寬
效果圖：
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">回復(fù)</span>
</div>
</div>
</div>
核心點(diǎn)：
.avatar元素左浮動(dòng)，.content元素的display屬性設(shè)為table-cell，其實(shí)這里的.content元素不一定非要設(shè)置display為table-cell才行，只要是能觸發(fā)BFC/haslayout的就行，比如：
float:left/right position:absolute/fixed overflow:hidden/scroll(IE7+) display:inline-block/table-cell(IE8+)
不過因?yàn)檫@里的.content元素是自適應(yīng)的，不能定寬，而且里面包含塊級(jí)元素，所以只能設(shè)置overflow屬性。
css代碼：
* {margin:0; padding:0;}
li {list-style: none;}
a {text-decoration: none;}
body {font-family: '微軟雅黑';}
.wrap {
width: 800px;
margin: 50px auto;
}
.avatar {
float: left;
margin-right: 20px;
}
.avatar img {
width: 80px;
height: 80px;
border-radius: 50%;
}
.content {
display: table-cell;
}
.date {
font-size: 14px;
color: #666;
}
.text {
margin: 20px 0;
}
2.右側(cè)定寬流式布局
效果圖：
html代碼：
<div class="wrap">
<ul class="list">
<li class="item">
<div class="content-wrap">
<div class="content">
<div class="author">
<a href="#" class="avatar"><img src="images/header.jpg" alt="頭像"></a>
<span class="name">李榮浩</span>
<span class="date">2016-01-22</span>
</div>
<a href="#" class="title">不將就</a>
<p>互相折磨到白頭 悲傷堅(jiān)決不放手 開始糾纏之后 才又被人放大了自由 你的暴烈太溫柔 感情又痛又享受 如果我說不吻你不罷休 誰能逼我將就</p>
<div class="meta">
<span class="category-tag">歌曲</span>
<span class="msg-tag">喜歡·5000</span>
</div>
</div>
</div>
<a href="#" class="thumbnail"><img src="images/pic.jpg" alt="圖片"></a>
</li>
</ul>
</div>
核心點(diǎn)：
1：當(dāng)?shù)谝粋€(gè)浮動(dòng)元素的寬度為100%時(shí)，第二個(gè)元素會(huì)自動(dòng)換行，緊挨著第一個(gè)元素，這時(shí)可以給第二個(gè)浮動(dòng)元素添加負(fù)margin值，使它上去
2：第一個(gè)浮動(dòng)元素.content外面有一個(gè)包裹元素，方便給.content元素添加padding-right值，讓左邊的內(nèi)容和右邊圖片之間留出空隙
其實(shí)雙飛翼布局的思想也是包含上面兩點(diǎn)。
css代碼：
* {margin:0; padding:0;}
li {list-style: none;}
a {text-decoration: none;}
body {font-family: '微軟雅黑';}
.wrap {
width: 800px;
margin: 50px auto;
}
.item {
padding-bottom: 15px;
border-bottom: 1px solid #ccc;
overflow: hidden;
}
.content {
float: left;
padding-right: 180px;
}
.avatar {
display: inline-block;
width: 32px;
height: 32px;
border-radius: 50%;
vertical-align: middle;
overflow: hidden;
}
.avatar img {
width: 100%;
height: 100%;
}
.name {
vertical-align: middle;
}
.date {
font-size: 14px;
color: #666;
vertical-align: middle;
}
.title {
display: block;
padding: 10px 0;
font-size: 18px;
font-weight: bold;
line-height: 1.5;
color: #333;
}
.thumbnail {
float: left;
margin-left: -120px;
}
.thumbnail img {
width: 120px;
height: 120px;
}
.meta {
margin-top: 15px;
font-size: 14px;
}
.category-tag {
display: inline-block;
padding: 0 8px;
margin-right: 10px;
border: 1px solid #ea6f5a;
border-radius: 3px;
color: #ea6f5a
}
.msg-tag {
color: #999;
}
3.兩側(cè)固定，中間自適應(yīng)的三欄布局
現(xiàn)在三欄布局很少了，如果要用到，請(qǐng)直接百度雙飛翼布局或者圣杯布局。
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
- 本篇文章主要介紹了css中Float屬性， 顧名思義,就是讓設(shè)置的標(biāo)簽產(chǎn)生浮動(dòng)效果,就是脫離原來頁面的標(biāo)準(zhǔn)輸出流。2016-12-21
CSS重要屬性之float學(xué)習(xí)心得(分享)
下面小編就為大家?guī)硪黄狢SS重要屬性之float學(xué)習(xí)心得(分享)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-18css(display,float,position)深入理解
下面小編就為大家?guī)硪黄猚ss(display,float,position)深入理解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-17- 下面小編就為大家?guī)硪黄仙Ｕ刢ss中float的用法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-18
CSS使用float屬性設(shè)置浮動(dòng)元素的實(shí)例教程
這篇文章主要介紹了CSS使用float屬性設(shè)置浮動(dòng)元素的實(shí)例教程,包括使用overflow清除浮動(dòng)的方法,需要的朋友可以參考下2016-07-07使用CSS的overflow屬性防止float撐開div的方法
我們?cè)谑褂胒loat設(shè)定浮動(dòng)元素的時(shí)候經(jīng)常會(huì)遇到撐破div的情況,其中一種解決方法即是利用overflow: hidden,這里我們就來看一下使用CSS的overflow屬性防止float撐開div的方法:2016-07-07
CSS清除浮動(dòng)float的三種方法小結(jié)
使元素脫離文檔流，按照指定方向發(fā)生移動(dòng)，遇到父級(jí)邊界或者相鄰的浮動(dòng)元素停了下來。本文給大家?guī)砹薈SS清除浮動(dòng)float的三種方法小結(jié)，感興趣的朋友跟隨腳本之家小編一起2018-03-13
