css浮動考點

時間 2019-12-05

標籤 css 浮動欄目 CSS 简体版

原文原文鏈接

1、面試題型

面試考點有兩種：html

一、頁面效果，考察對浮動的理解。面試

二、清除浮動的方法。瀏覽器

例1：下面程序的效果圖bash

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #p1{
            width:50px;
            height:50px;
            float: left;
            background-color: red;
        }
        #p2{
            width:100px;
            height:50px;
            background-color: green;
        }
    </style>
</head>
<body>
<p id="p1"></p>
<p id="p2">test</p>

</body>
</html>複製代碼

效果圖：ui

例2spa

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #p1{
            width:50px;
            height:50px;
            float: left;
            background-color: red;
        }
        #p2{
            width:100px;
            height:50px;
            background-color: green;
        }
    </style>
</head>
<body>
<div id="p1"></div>
<div id="p2">test</div>

</body>
</html>複製代碼

效果圖：3d

之因此呈現出這種效果是由於浮動元素會脫離文檔流，塊級元素表現的像浮動框不存在同樣，而文字會圍繞在浮動元素旁邊。code

疑問：爲何p標籤和div呈現出來的效果稍有不一樣?cdn

緣由：p標籤默認存在margin值，將p的margin設爲0便可解決。htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #p1{
            width:50px;
            height:50px;
            float: left;
            background-color: red;
            margin: 0;
        }
        #p2{
            width:100px;
            height:50px;
            background-color: green;
        }
    </style>
</head>
<body>
<p id="p1"></p>
<p id="p2">test</p>

</body>
</html>複製代碼

效果圖

2、什麼是浮動？

浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。因爲浮動框脫離文檔的普通流中，因此文檔的普通流中的塊框表現得就像浮動框不存在同樣。

3、浮動的特色

脫標：脫離標準文檔流。

貼邊：左浮動時，元素向左移動，直到它的左邊貼到包含塊的左邊緣。

字圍：文字會圍着浮動元素排開。

收縮：塊級元素設置浮動後，其寬度再也不佔滿一行，而是收縮爲包含內部元素的寬度便可。

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            width:50px;
            height:50px;
            float: left;
            background-color: red;
        }
        #div2,#div3{
            width:50px;
            height:50px;
            background-color: green;
        }
    </style>
</head>
<body>
<div id="div1"></div>
<div id="div2">test</div>
<div id="div3">test</div>

</body>
</html>複製代碼

當#div2,#div3的 width:50px;時，div2其實是被div1浮動徹底遮蓋住了，因爲設置了寬度，文字又必須圍繞浮動元素，因此文字跑到下面去了。

當#div2,#div3的 width:100px;時，div2其實是被div1浮動遮蓋了一半，因爲寬度夠放文字，文字圍繞浮動元素，因此文字在其右面。

當#div2,#div3不設置寬度時，效果以下：

例2：解釋收縮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            float: left;
            background-color: red;
        }
        #div2,#div3{
            width:50px;
            height:50px;
            background-color: green;
        }
    </style>
</head>
<body>
<div id="div1">我是浮動元素</div>
</body>
</html>複製代碼

效果：

4、浮動的缺點

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1,#div2,#div3{
            width:50px;
            height:50px;
            float: left;
        }
        #div1{
            background-color: red;
        }
        #div2{
            background-color: green;
        }
        #div3{
            background-color: #00A0E9;
        }
        #parent{
            border: 5px solid #000;
            width: 150px;
        }
    </style>
</head>
<body>
<div id="parent">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</div>


</body>
</html>複製代碼

效果：

本想讓父容器包裹着三個浮動元素，可是浮動帶來反作用----父容器高度塌陷，因而清理浮動就顯着相當重要。

5、清除浮動

清除浮動不是不用浮動，清除浮動產生的父容器高度塌陷。

法1、給浮動元素的父元素添加高度（擴展性很差）

例：

#parent{
    border: 5px solid #000;
    width: 150px;
    height: 50px;
}複製代碼

若是一個元素要浮動，那麼它的父元素必定要有高度。有高度的盒子，才能關住浮動。能夠經過直接給父元素設置height，實際應用中咱們不大可能給全部的盒子加高度，不只麻煩，而且不能適應頁面的快速變化；另一種，父容器的高度能夠經過內容撐開（好比img圖片），實際當中此方法用的比較多。

法2、clear：both；

在最後一個子元素的後面添加一個塊級元素，而後將其設置clear:both,這樣就能夠清除浮動。

例：

<div id="parent">
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <br id="wrap"/>
</div>複製代碼

#wrap{
    clear: both;
}複製代碼

法3、僞元素清除浮動推薦使用

上面那種辦法當然能夠清除浮動，可是咱們不想在頁面中添加這些沒有意義的冗餘元素，此時如何清除浮動嗎？ 結合 :after 僞元素和 IEhack ，能夠完美兼容當前主流的各大瀏覽器，這裏的 IEhack 指的是觸發 hasLayout。

#parent{
    *zoom:1;   //觸發haslayout
}
#parent:after{
    content:'';
    display:block;
    clear: both;

}複製代碼

注意：上面的代碼爲必須有的。

法4、觸發造成BFC

這種方案讓父容器造成了BFC（塊級格式上下文），而BFC能夠包含浮動，一般用來解決浮動父元素高度坍塌的問題。

BFC的觸發方式

咱們能夠給父元素添加如下屬性來觸發BFC：

float 爲 left | right
overflow 爲 hidden | auto | scorll
display 爲 table-cell | table-caption | inline-block
position 爲 absolute | fixed

能夠給父元素設置overflow:auto，可是爲了兼容IE最好使用overflow:hidden。

例：

#parent{
    overflow: hidden;
}複製代碼

但這種辦法有個缺陷：若是有內容出了盒子，用這種方法就會把多的部分裁切掉，因此這時候不能使用。

總結：清除浮動的方法

相關標籤/搜索

每日一句

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