浮動以及如何清除浮動

時間 2019-12-09

標籤浮動以及如何清除简体版

原文原文鏈接

浮動css

定義：浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。因爲浮動框不在文檔的普通流中，因此文檔的普通流中的浮動框以後的塊框表現得就像浮動框不存在同樣。（注意這裏是塊框而不是內聯元素；浮動框只對它後面的元素形成影響）html

問題1：浮動元素後跟block元素&浮動元素後跟inline元素對佈局的影響瀏覽器

浮動的框以後的block元素元素會認爲這個框不存在，但其中的文本依然會爲這個元素讓出位置。浮動的框以後的inline元素，會爲這個框空出位置，而後按順序排列。以下第一個例子box2是浮動框，其後跟一個塊元素；例子2是浮動框後跟一個內聯元素。佈局

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
     #box1{background-color:pink;width:100px;height:100px;}
     #box2{background-color:green;width:100px;height:100px;float:left;}
     #box3{background-color:red;width:200px;height:200px;}
    </style>
</head>
<body>
<div id="box1">box1</div>
<div id="box2">box2 向左浮動</div>
<div id="box3">box3</div>
<!--<span id="box3">span3</span>-->
</body>

問題2：元素浮動形成的兩個div覆蓋或相互重疊如何解決。spa

（1）、左右結構div盒子重疊現象htm

通常是因爲相鄰兩個DIV一個使用浮動一個沒有使用浮動。如上面的例1：相鄰的兩個盒子box2向左浮動、box3未浮動。一個使用浮動一個沒有致使DIV不是在同個「平面」上，但內容不會照成覆蓋現象，只有DIV造成覆蓋現象。對象

解決方法：1.要麼都不使用浮動；要麼都使用float浮動；blog

2.對沒有使用float浮動的DIV設置margin樣式。如上面的例1中box2寬度是100，只須要對box3設置margin-left：102px就能夠實現不重疊。文檔

（2）、上下結構div盒子重疊現象it

例子以下：.container和box3的佈局是上下結構，上圖發現box3跑到了上面，與.container產生了重疊，但文本內容沒有發生覆蓋，只有div發生覆蓋現象。這個緣由是由於第一個大盒子裏的子元素使用了浮動，脫離了文檔流，致使.container沒有被撐開。box3認爲.container沒有高度（未被撐開），所以跑上去了。

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{margin:0;padding:0;}
        .container{border:1px solid red;width:300px;}
        #box1{background-color:green;float:left;width:100px;height:100px;}
        #box2{background-color:deeppink; float:right;width:100px;height:100px; }
        #box3{background-color:pink;height:40px;}
    </style>
</head>
<body>

<div class="container">
    <div id="box1">box1 向左浮動</div>
    <div id="box2">box2 向右浮動</div>
</div>
<div id="box3">box3</div>
</body>

解決方法：

一、給.container設置固定高度，通常狀況下文字內容不肯定多少就不能設置固定高度，因此通常不能設置「.container」高度(固然能肯定內容多高，這種狀況下「..container是能夠設置一個高度便可解決覆蓋問題。

二、清除浮動。清除浮動後的效果以下：

2.一、使用css clear清除浮動，在.container盒子閉合前加clear樣式清除浮動。

深刻理解clear屬性：

clear屬性規定元素的哪一側不容許出現浮動元素，他的語法以下：

clear語法：
clear : none | left | right | both

取值：
none : 默認值。容許兩邊均可以有浮動對象
left : 不容許左邊有浮動對象
right : 不容許右邊有浮動對象
both : 不容許有浮動對象

可是須要注意的是：clear屬性只會對自身起做用，而不會影響其餘元素。若是一個元素的右側有一浮動對象，而這個元素設置了不容許右邊有浮動對象，即clear：right，則這個元素會自動下移一格，達到本元素右邊沒有浮動對象的目的。

務必記住這句話：「float是魔鬼，會影響其餘相鄰元素；可是clear是小白，其只會影響自身，不會對其餘相鄰元素形成影響！」

例如：下圖例3 box1向右側浮動，box2不設置clear屬性時的示意圖；例4中box1向右側浮動，box2設置clear：right，表示右側不容許出現浮動元素，則box2自動下移一行。

一樣的，若是是box1向左浮動，box2和box1則會出現重疊，如例5；但若是在box2中設置clear：left；表示左側不容許出現浮動元素，則box2一樣會下移。

可是爲了計算方便：通常都會增長一個空div塊，並使用clear：both來設定表示兩側都不容許有浮動元素。這樣新的空div塊會下移，達到撐開父元素的目的。

<head>
    <meta charset="UTF-8">
    <title>DIV 相互重疊</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        .container{border:1px solid red;width:300px;}
        #box1{background-color:green;float:left;width:100px;height:100px;}
        #box2{background-color:deeppink; float:right;width:100px;height:100px; }
        #box3{background-color:pink;height:40px;}
        .clear{clear:both;}
    </style>
</head>
<body>

<div class="container">
    <div id="box1">box1 向左浮動</div>
    <div id="box2">box2 向右浮動</div>
     <div class="clear"></div>
</div>
<div id="box3">box3</div>
</body>

　　✦經常使用清除浮動方法

// 引入了*zoom以針對性支持IE6/7
// 同時加入:before以解決現代瀏覽器上邊距摺疊的問題

.clearfix:before,
.clearfix:after {
    display: table;
    content: " ";
}

.clearfix:after {
    clear: both;
}

.clearfix{
    *zoom: 1;
}

✦ IE6/7不支持BFC，也不支持:after，因此IE6/7清除浮動要靠觸發hasLayout。

2-2：給父元素設置overflow：hidden來清除浮動。觸發BFC（塊狀格式化上下文）

這裏咱們能夠這樣理解：overflow：hidden的含義是超出的部分要裁切隱藏，float的元素雖然不在普通流中，可是他是浮動在普通流之上的，能夠把普通流元素+浮動元素想象成一個立方體。若是沒有明確設定包含容器高度的狀況下，它要計算內容的所有高度才能肯定在什麼位置hidden，這樣浮動元素的高度就要被計算進去。這樣包含容器就會被撐開，清除浮動。

<head>
    <meta charset="UTF-8">
    <title>DIV 相互重疊</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        .container{border:1px solid red;width:300px;overflow:hidden;}
        #box1{background-color:green;float:left;width:100px;height:100px;}
        #box2{background-color:deeppink; float:right;width:100px;height:100px; }
        #box3{background-color:pink;height:40px;}
        .clear{clear:both;}
    </style>
</head>
<body>

<div class="container">
    <div id="box1">box1 向左浮動</div>
    <div id="box2">box2 向右浮動</div>
</div>
<div id="box3">box3</div>
</body>

參考：https://www.cnblogs.com/shenfangfang/p/5278528.html

相關標籤/搜索

每日一句

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

浮動 以及 如何清除浮動

浮動以及如何清除浮動