HTML连载49-清除浮动的第三种方式（内外墙法） - 心悦君兮君不知-睿

来源：cnblogs　　作者：心悦君兮君不知-睿　　时间：2019/11/14 8:35:39　　对本文有异议

一、清除浮动的第三种方式

1.隔墙法有两种?如下：外墙法和内墙法?。?

2.外墙法

（1）在两个盒子中间添加一个额外的块级元素

（2）给这个额外添加的块级元素设置：clear:both;属性

注意点：外墙法可以让第二个盒子使用margin-top属性

但是不能让第一个盒子使用margin-bottom属性

解决方案：为了避免上面的问题，我们在“?墙”所在的元素设置高度就解决这个问题了。

 
 
<!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.内墙法

（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>