css浮動(float)及如何清除浮動

時間 2019-11-08

標籤 css 浮動 float 如何清除欄目 CSS 简体版

原文原文鏈接

前言：css

CSS浮動是如今網頁佈局中使用最頻繁的效果之一,而浮動能夠幫咱們解決不少問題,那麼就讓咱們一塊兒來看一看如何使用浮動.html

一.css浮動(float)
(1)html文檔流前端

自窗體自上而下分紅一行一行，並在每行中按從左到右的順序排放元素。
(2)網頁中大部分對象默認是佔用文檔流，也有一些對象是不佔文檔流的，好比表單中隱藏域。html5

固然咱們也可讓佔用文檔流的元素轉換成不佔文檔流，這就要用到CSS中屬性position、float、display來控制。默認狀況下，全部元素都處在文檔流中，四種狀況將使得元素離開文檔流：浮動float、絕對定位absolute、相對定位fixed、元素不顯示display:none，這種狀況不佔文檔流的空間，而普通元素的位置基於文檔流。（瞭解）浮動float用於設置標籤的居左浮動和居右浮動，浮動後的元素不屬於html文檔流，須要用清除浮動把文檔拽回到文檔流中。web

浮動值：佈局

left：向左浮動
   right：向右浮動

特徵：網站

塊元素能夠在一行顯示

浮動特徵：spa

1.按照一個指定的方向移動，遇到父級的邊界或者其餘的元素停下來
2.塊元素能夠在一行顯示，寬由內容撐起來
3.行內元素支持設置寬高
4.脫離文檔流  float不是徹底脫離文檔流的
    塊元素 ：對於塊元素，後面未浮動的元素所佔的位置是浮動元素的位置

注意：內容會把浮動元素的位置保留，code

行內元素：行內元素會接着浮動元素顯示，內容會造成環繞浮動元素的樣子

5.形成父級塌陷(破壞性)htm

經過例子來解釋浮動
1.頁面上有兩個塊元素，每一個塊元素獨佔一行
2.咱們但願它能並排顯示，這時就可使用float，咱們先給紅的div加float:left，發現兩個是在一行了，可是它們重疊在了一塊兒
3.這是由於加了float的元素不但會消除獨佔一行的特性，並且還會「飄」在其它元素之上
4.咱們爲藍色的div也加上float，這時正常了，兩個div顯示在一排

代碼

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <title>CSS浮動定位</title>
    <style>
        .d1{width:200px; height:200px; background:red; float: left; }
        .d2{width:300px; height:300px; background:blue;float: left;}
        /*.d3{width:500px; height:500px; background:green; clear:both;}*/
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="d2"></div>
    <!--<div class="d3"></div>-->
</body>
</html>

浮動的目的是使元素變爲可在一行顯示，且可設置寬和高的元素。它的做用相似於inline-block；只不過它是脫離了文檔流了。

浮動的元素脫離文檔流後，對塊元素而言，從上向下的文檔流中找不到浮動的元素，因此在浮動元素後加塊元素，塊元素會被覆蓋掉。

.d1{ width:100px; height: 100px; background-color:red; float: left}
  .d2{ width:200px; height: 200px; background-color:blue; float: left}
  .d3{ width:400px; height: 400px; background-color:green;}
        <div class="d1"></div>
        <div class="d2"></div>
        <div class="d3"></div>

浮動的元素脫離文檔流後，這個浮動的塊元素雖然脫離了文檔流，但對它後面的行元素而言，從左至右的位置中，是要以這個浮動元素的位置開始的。

.d1{ width:100px; height: 100px; background-color:red; float: left}
.d2{ width:200px; height: 200px; background-color:blue; float: left}
    <div class="d1"></div>
<div class="d2"></div>
<a href="#">這是個不浮動的超級連接</a>

2、清除浮動
描述：清除浮動是在使用了浮動以後必不可少的，爲了網站佈局的效果，清除浮動也變得很是麻煩。
屬性：clear
值：left、right、both
清除浮動的經常使用方式：
1.結尾處加空div標籤 clear:both （或在下一個元素上加clear:both;）
2.父級div定義僞元素:after
3.父級div定義 overflow:hidden

(1). 結尾處加空div標籤 clear的方式清除浮動
a.剛纔的例子已經完成了並排佈局，這時我須要加第三個塊元素，起名d3，這時發現，d3是被壓在了前兩個塊之下
b.剛纔說過，加了float的元素會飄在其它元素之上，其實是由於它們已經不屬於html正常的文檔流了，後面再有多少個元素和它無關，它始終飄在上面
c.咱們只是想讓它不獨佔一行，並無想讓它不屬於文檔流。因此能夠用clear:both把float元素拽迴文檔流。

用clear:both清除浮動代碼

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <title>CSS浮動定位</title>
    <style>
        .d1{width:200px; height:200px; background:red; float: left; }
        .d2{width:300px; height:300px; background:blue;float: left;}
        .d3{width:500px; height:500px; background:green; clear:both;}
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>
</body>
</html>

clear不僅是both一個屬性，它還有left和right，它們兩個的做用是分別清除float的左浮動和右浮動。

<div class="d1"></div> 左浮動

<div class="d4"></div>    未浮動
<div class="d2"></div>    右浮動
<div class="clear"></div>
<div class="d3"></div>

clear:both; 的正確使用方式：
1.加了clear:both的元素須要爲塊元素。這樣clear:both才能清除塊「從上而下」的文檔流中被浮動的元素。
2.不要加在外層的div外面，若是這個外層div沒有浮動，那這個clear:both是不起做用的。

.d1{ width:100px; height: 100px; background-color:red; float: left}
.d2{ width:200px; height: 200px; background-color:blue; float: left}
.d3{ width:400px; height: 400px; background-color:green;}
 .clear{clear: both;}
 <div class="divBox">
        <div class="d1"></div>
        <div class="d2"></div>
        <div class="d3"></div>
    </div>
    <div class="clear">這裏加了一個清除浮動</div>

不起做用

(2).使用overflow:hidden清除浮動

.box{ overflow: hidden;}  //overflow:auto也是能夠的
.left,.right{ width:100px; height: 100px; background:#388bff; float: left;}
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>

(3).使用僞元素清除浮動

after僞元素添加的內容默認爲行內元素，因此須要設置display:block
.box::after{ content: " "; clear: both; display: block;}
.left,.right{ width:100px; height: 100px; background:#388bff; float: left;}
<div class="box">
        <div class="left"></div>
        <div class="right"></div>
</div>

使用浮動別忘記清除浮動,記住,不管如今浮動是否對你有影響,都要楊成良好的習慣,不然等後續修改代碼的時候可能會影響整個佈局。

上海尚學堂web前端培訓原創，歡迎點擊閱讀其餘web前端開發相關技術文章或者獲取更多支持資料。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。