前言

本篇文章是看過《css系列-css深入理解之float浮動》 之後的一些感悟和思考。原文章已經寫過的知識，就不再贅述了。

一、 從「左中右」布局說起

從上面鏈接中一個小布局說起，實現這個布局

  • 文字環繞變身-中間內容居中，左中右布局

源代碼是這麼寫的

html中：

<div class="content">
<a href="#" class="fl">左青龍</a>
<a href="#" class="fr">右白虎</a>
<h3 class="text-center">標題</h3>
</div>

CSS中：

.fl {
float: left;
}

.fr {
float: right;
}
.text-center {
text-align: center;
}

效果如圖：

不知道你有沒有這個疑問，為什麼前面的布局要先把兩個浮動元素放在最前面呢？

一旦我們將幾個元素的順序調換了位置，就會發現這些布局發生意想不到的變化。

<div class="content">
<a href="#" class="fl">左青龍</a>
<h3 class="text-center">標題</h3>
<a href="#" class="fr">右白虎</a>
</div>

我們發現效果是這樣的

二、浮動元素其實是真的「浮動」

為什麼會這麼說呢？我們可以這樣理解，將一個元素設置元素之後，就發生了兩件事情，

  1. 在它的原來的位置向上「漂浮」
  2. 去除原來文檔流中的位置。可以大致分為三種情況（本質都是一樣的）

1. 都是浮動元素

html中

<div class="test1">
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>
</div>

css中

.test1 {
width: 500px;
background-color: aqua;
overflow: hidden;/*觸發BFC*/
margin: 10px;
}
.float {
width: 100px;
height: 100px;
background-color: blueviolet;
margin: 10px;
}

增加float: left之後

我們來分析一下發生了什麼？

在未進行浮動是這樣的

緊接著第一個block 浮動，它首先向上浮動，然後清除原來的位置。導致下面的block向上佔據了原來的位置。

同樣的道理

2. 有未浮動的塊級元素

html

<div class="test2">
<div class="float"></div>
<div class="block"></div>
<div class="float"></div>
</div>
.test2 {
width: 500px;
background-color: aqua;
overflow: hidden;
margin: 10px;
}
?
.float {
width: 100px;
height: 100px;
background-color: blueviolet;
margin: 10px;
}
.block {
width: 100px;
height: 100px;
background-color: green;
margin: 10px;
}

初始效果相同。

將兩個進行浮動float:left

效果如圖

並不因為缺了一個block ，只是被覆蓋了。

3 行內元素

?
<div class="test3">
<div class="float"></div>
<span class="inline">嗯嗯嗯！這是行內元素</span>
<div class="float">
</div>
</div>
.test3 {
width: 500px;
background-color: aqua;
overflow: hidden;
margin: 10px;
}
.float {
width: 100px;
height: 100px;
background-color: blueviolet;
margin: 10px;
}
?

將第一個向左浮動。

為了看清楚，將第二個block的寬度改為200px

最終效果：

三、float的破壞性

float會破壞塊級元素的流式性。所謂流式性，就是當塊級元素沒有設置寬度的時候，他會自動的設置成和父元素相同的寬度！而當元素一旦設置成了float之後，會破壞這種特性，從而必須設定一個寬度，將元素撐起來。

所以你會看到，一般設置float的元素，都會緊跟著寬度。

（完）??


推薦閱讀：
相关文章