詳細解讀css中的浮動以及清除浮動的方法

時間 2020-04-29

標籤詳細解讀 css 浮動以及清除方法欄目 CSS 简体版

原文原文鏈接

對於前端初學者來講，css浮動部分的知識是一塊比較難以理解的部分，下面我將把我學習過程當中的心得分享給你們。css

導讀：

1.css塊級元素講解html

2.css中浮動是如何產生的
前端

　3.出現浮動後，如何清除浮動（本文將涉及到多種清除浮動的方法）
chrome

博客正文：

1.css塊級元素講解瀏覽器

　　常見的塊級元素主要有如下幾種：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>、<dir>、<hr>。佈局

　　css中塊級元素的特色：塊級元素能夠設置寬高，若是不設置的話，默認爲父容器的寬高；老是在新行上開始而且獨佔一行；高度，行高以及外邊距和內邊距均可控制；能夠容納內聯元素和其餘塊元素；學習

　2.css中浮動是如何產生的spa

　　在網頁佈局中爲了佈局更美觀，佈局更方便，因而咱們不可避免的要使用元素浮動，在css中咱們使用float來設置浮動。下面咱們來詳細講解浮動：code

　　請看下圖，當把框 1 向右浮動時，它脫離文檔流而且向右移動，直到它的右邊緣碰到包含框的右邊緣：orm

再請看下圖，當框 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>
　　　未清除浮動帶來的影響主要有如下三點;

一、背景不能顯示

　　 二、邊框不能撐開

　　　　 三、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的效果。

　　　清除浮動後的效果展現以下：