清除浮動隨堂小結

時間 2019-11-30

標籤清除浮動小結简体版

原文原文鏈接

浮動的清除方式

浮動產生的反作用

1. 背景不能顯示

因爲浮動產生，若是對父級設置了css背景顏色或css背景圖片，而父級不能被撐開，因此致使css背景不能顯示。css

2. 邊框不能撐開

若是父級設置了css邊框屬性（css border），因爲子級裏使用了float屬性，產生浮動，父級不能被撐開，致使邊框不能隨內容而被撐開。html

3. margin padding設置值不能正確顯示

因爲浮動致使父級子級之間設置了css padding、css margin屬性的值不能正確表達。特別是上下邊的padding和margin不能正確顯示。api

css解決浮動，清除浮動方法

1. 對父級設置適合css高度

對父級設置適合高度樣式清除浮動，通常設置高度須要能肯定內容高度才能設置。盒子在網頁中所佔的高度爲 height + padding2 + border2.測試

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    * {
        margin:0;
        padding:0;
    }
    ul,li {
        list-style: none;/*清除掉列表的默認樣式*/
    }

    .box ul li {
        width: 100px;
        height: 50px;
        float: left;
        background-color: orange;
        margin-left: 10px;
    }
    /*解決浮動帶來影響的第一種方案:給浮動元素的父元素添加高度*/
    .box {
        height: 50px;
    }
</style>
</head>
<body>
<div class="box">
    <ul>
        <li>Html</li>
        <li>Css</li>
        <li>JavaScript</li>
        <li>Vue.js</li>
    </ul>
</div>
<div class="box2 clear">
    <ul>
        <li>測試文字</li>
        <li>測試文字</li>
        <li>測試文字</li>
        <li>測試文字</li>
    </ul>
</div>
</body>
</html>

顯示結果爲:
code

2. clear:both 清除浮動

將上訴代碼的style代碼更改成：htm

<style>
    * {
        margin:0;
        padding:0;
    }
    ul,li {
        list-style: none;/*清除掉列表的默認樣式*/
    }

    .box ul li {
        width: 100px;
        height: 50px;
        float: left;
        background-color: orange;
        margin-left: 10px;
    }
    .clear {
        clear: both;
    }
    .box2 {
        margin-top: 1000px;
    }
</style>

結果與上圖同樣，可是咱們會發現類.box2的外邊距1000px並無在網頁中顯示出來，因此採用第二種方式會致使margin外邊距失效.圖片

3. 父級div定義overflow：hidden

對父級css選擇器加overflow：hidden樣式，能夠清除父級內使用float產生浮動。優勢是可使用不多css代碼就可解決浮動產生。ip

<style>
    .d1 {
        width: 300px;
        height: 100px;
        border:1px solid #ccc;
        overflow: auto;
    }
    .test {
        border:2px solid red;
        /*可以解決父元素中子元素浮動以後父元素沒有高度的問題，而且設置以後父元素的高度就會是最高的那個子元素的高度*/
        overflow: hidden;
        /*height: 00px;*/
    }

    .s1 {
        width: 300px;
        height: 700px;
        background-color:blue;
        float: left;
    }
    .s2 {
        width: 200px;
        height: 400px;
        background-color: orange;
        float: left;
    }
</style>
</head>
<body>
<div class="d1">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore totam est culpa non sapiente tempora consequuntur, ea alias nisi eos. Eum, neque consectetur totam tenetur ex pariatur magnam omnis at!
</div>

結果顯示爲：ci

4. 隔牆法

在兩部分浮動元素之間，建一個牆，隔開兩部分浮動（注意是在兩個包含浮動元素的盒子中間）。牆要加clear：both屬性。用牆本身自己的高度做爲兩個盒子之間的間隙。內牆法：將牆放在浮動元素所在的盒子裏。與外牆法不一樣的是，內牆法使得盒子被撐起了高度。rem

<style type="text/css">
    div ul li {
        float:left;
        width: 100px;
        height: 50px;
        background-color: blue;
        list-style: none;

    }
    .h10 {
        height: 20px;
    }
    .c1 {
        clear: both;
    }
</style>
</head>
<body>
<div>
    <ul>
        <li>qqqqqqq</li>
        <li>aaaaaaa</li>
    </ul>
<!--內牆法 <div class="c1 h10"></div>  -->
</div>
<!--外牆法-->
    <div class="c1 h10"></div>

<div>
    <ul>
        <li>qqqqqqq</li>
        <li>aaaaaaa</li>
    </ul>
</div>
</body>

外牆法與內牆法結果顯示同樣：

相關標籤/搜索

每日一句

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