HTML連載49-清除浮動的第三種方式（內外牆法）

時間 2019-11-14

標籤 html 連載清除浮動三種方式外牆欄目 HTML 简体版

原文原文鏈接

1、清除浮動的第三種方式html

1.隔牆法有兩種以下：外牆法和內牆法。git

2.外牆法github

（1）在兩個盒子中間添加一個額外的塊級元素微信

（2）給這個額外添加的塊級元素設置：clear:both;屬性學習

注意點：外牆法能夠讓第二個盒子使用margin-top屬性大數據

可是不能讓第一個盒子使用margin-bottom屬性ui

解決方案：爲了不上面的問題，咱們在「牆」所在的元素設置高度就解決這個問題了。spa

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>D134_ClearFloatThree</title>

    <style>

        .box1{

            background-color: red;

            /*border:1px white solid;*/

        }

        .box2{

            background-color: green;

            /*border:1px white solid;*/

        }

        .box1 p{

            width:100px;

            background-color: blue;

            float:left;

        }

        .box2 p{

            width:100px;

            background-color: red;

            float:left;

        }

        .wall{

            clear:both;

            height:20px;

        }

</style>

</head>

<body>

<div class="box1">

    <p>我是文字1</p>

    <p>我是文字2</p>

    <p>我是文字3</p>

</div>

<div class="wall h20"></div><!--這裏還複習了一個標籤能夠定義多個class屬性的方式，多個屬性能夠統一設置樣式-->

<div class="box2">

    <p>我是文字4</p>

    <p>我是文字5</p>

    <p>我是文字6</p>

</div>

</body>

</html>

3.內牆法.net

（1）在兩個盒子中間添加一個額外的塊級元素設計

（2）給這個額外添加的塊級元素設置clear:both;屬性

注意點：外牆法能夠讓第二個盒子使用margin-top屬性

也能夠讓第一個盒子使用margin-bottom屬性

下面咱們只修改上面例子的幾行代碼便可

 

        .wall{

            clear:both;

            /*height:20px;*/

        }

 .......省略代碼........

<div class="box1">

    <p>我是文字1</p>

    <p>我是文字2</p>

    <p>我是文字3</p>

    <div class="wall"></div>

</div>