欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML连载49-清除浮动的第三种方式(内外墙法)

程序员文章站 2022-05-21 14:49:35
一、清除浮动的第三种方式 1.隔墙法有两种​如下:外墙法和内墙法​。​ 2.外墙法 (1)在两个盒子中间添加一个额外的块级元素 (2)给这个额外添加的块级元素设置:clear:both;属性 注意点:外墙法可以让第二个盒子使用margin-top属性 但是不能让第一个盒子使用margin-botto ......

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

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>

HTML连载49-清除浮动的第三种方式(内外墙法)

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>

 

HTML连载49-清除浮动的第三种方式(内外墙法)

4.外墙法与内墙法的区别

外墙法不能撑起第一个盒子的高度,而内墙法可以撑起第一个盒子的高度​。

5.​注意点:不常用的外墙和内墙法,外墙法容易降低易读性,不知干什么的;内墙则违背了我们样式设计和内容相分离的初衷,所以仅作了解

三、源码:

d134_clearfloatthree.html

d135_clearfloatinternalwallmethod.html

地址:

https://github.com/ruigege66/html_learning/blob/master/d134_clearfloatthree.html

https://github.com/ruigege66/html_learning/blob/master/d135_clearfloatinternalwallmethod.html

2.csdn:https://blog.csdn.net/weixin_44630050(心悦君兮君不知-睿)

3.博客园:https://www.cnblogs.com/ruigege0000/

4.欢迎关注微信公众号:傅里叶变换,个人账号,仅用于技术交流,后台回复“礼包”获取java大数据学习视频礼包

 HTML连载49-清除浮动的第三种方式(内外墙法)HTML连载49-清除浮动的第三种方式(内外墙法)