详细解读css中的浮动以及清除浮动的方法
?? 對于前端初學者來說，css浮動部分的知識是一塊比較難以理解的部分，下面我將把我學習過程中的心得分享給大家。
導讀：
? 1.css塊級元素講解
? 2.css中浮動是如何產生的
3.出現浮動后，如何清除浮動（本文將涉及到多種清除浮動的方法）
博客正文：
? 1.css塊級元素講解
常見的塊級元素主要有以下幾種：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>、<dir>、<hr>。
css中塊級元素的特點：塊級元素可以設置寬高，如果不設置的話，默認為父容器的寬高；總是在新行上開始并且獨占一行；高度，行高以及外邊距和內邊距都可控制；可以容納內聯元素和其他塊元素；
2.css中浮動是如何產生的
在網頁布局中為了布局更美觀，布局更方便，于是我們不可避免的要使用元素浮動，在css中我們使用float來設置浮動。下面我們來詳細講解浮動：
請看下圖，當把框 1 向右浮動時，它脫離文檔流并且向右移動，直到它的右邊緣碰到包含框的右邊緣：
???? 再請看下圖，當框 1 向左浮動時，它脫離文檔流并且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處于文檔流中，所以它不占據空間，實際上覆蓋住了框 2，使框 2 從視圖中消失。
?? 如果把所有三個框都向左移動，那么框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。
?
如下圖所示，如果父容器的包含框太窄，將三個元素都設置為浮動后，如果水平排列的三個浮動元素超出包含框的寬度，那么排在后面的浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，最前面的元素高度高于后面被擠下來的元素，那么當它們向下移動時可能被其它浮動元素“卡住”：
? ?在實際開發中設置完浮動后，有的時候我們需要清除浮動，一次我們需要了解clear屬性。
3.出現浮動后，如何清除浮動（本文將涉及到多種清除浮動的方法）
?????? 清除浮動的語法：
?
?????? clear : none | left | right | both
?
?????? 取值：
?
?????? none? :? 默認值。允許兩邊都可以有浮動對象
?
?????? left?? :? 不允許左邊有浮動對象
?
?????? right? :? 不允許右邊有浮動對象
?
?????? both? :? 不允許有浮動對象
牢記：css浮動的規則只能影響使用的元素本身，不會影響其他元素。
在實際討論清除浮動前我們先討論下為什么要清除浮動，首先看一下下面的例子，有助于更好地理解為什么要清除浮動：
??
代碼如下：
<!DOCTYPE html>
<html>
?? ?????? <head>
?? ??? ???? <meta charset="UTF-8">
?? ??? ? ?? <title></title>
?? ??? ? ?? <style type="text/css">
?? ??? ??? ? .div1{width: 200px;height: 200px;background: orange; float: left;}
?? ??? ??? ? .div2{width: 200px;height: 200px;background: green; float: left;}
?? ??? ??? ? .div3{width: 200px;height: 200px;background: red; float: left;}
?? ??? ??? ? .outer{border: 1px solid #ccc;background: #fc9;color: #fff;}
?? ??? ??? </style>
?? ?????? </head>
?? ? ? ?? <body>
?? ??? ???? <div class="outer clear-outer">
?? ??? ?????? <div class="div1">1</div>
?? ??? ??? ?? <div class="div2">2</div>
?? ??? ?????? <div class="div3">3</div>
<div class="clear">3</div>
?? ???????? </div>
?? ?????? </body>
????????? </html>
未清除浮動帶來的影響主要有以下三點;
????????????? 1、背景不能顯示
?
?????? 2、邊框不能撐開
?
?? 3、margin padding設置值不能正確顯示
清除浮動的方法：
方法一：
.clear{clear:both; height: 0; line-height: 0; font-size: 0}
方法二：父級div定義 overflow: auto
.clear-outer{ overflow: auto; zoom: 1; //zoom: 1; 是在處理兼容性問題 }?
方法三：
?? .outer {zoom:1;}??? /*==for IE6/7 Maxthon2==*/
.outer :after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}/*==for FF/chrome/opera/IE8==*/
這種方法清除浮動是現在網上最拉風的一種清除浮動，他就是利用:after和:before來在元素內部插入兩個元素塊，從面達到清除浮動的效果。其實現原理類似于clear:both方法，只是區別在于:clear在html插入一個div.clear標簽，而outer利用其偽類clear:after在元素內部增加一個類似于div.clear的效果。
清除浮動后的效果展示如下：
總結：
清除浮動的方式雖然是有很多種，但是不是每種都適合你，也不是每種都能很好的兼容所有瀏覽器，所以參照你覺得最好的方式去做，個人覺得方法三不錯，不需多于的標簽，而且也能很好的兼容。
?
?
?
總結
以上是生活随笔為你收集整理的详细解读css中的浮动以及清除浮动的方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CSS制作简单loading动画
- 下一篇： css3 flex 布局