网页的布局方式之清除浮动


本文摘自PHP中文网,作者php中世界最好的语言,侵删。

这次给大家带来网页的布局方式之清除浮动, 清除浮动的注意事项有哪些,下面就是实战案例,一起来看一下。

盒子的高度问题

1.标准流中盒子的高度可以被内容高度撑起来;
2.浮动流中浮动的内容不能撑起盒子的高度;

为什么要清楚浮动?

相邻的盒子之间,如果前面的盒子没有高度,那么后面盒子中的浮动元素就会去找前面盒子中的浮动元素,这样会导致界面混乱,所以需要清除浮动;

清除浮动方式一:

解决方案:

给前面一个父元素设置高度

注意点:

在企业开发中, 我们能不写高度就不写高度, 所以这种方式用得很少;

CSS:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<style>

     *{

         margin: 0;

         padding: 0;

     }

     .box1{

         height: 20px;  //给前面盒子设置高度

         background-color: red;

     }

     .box2{

         background-color: green;

     }

     .box1 p{

         width: 100px;

         background-color: blue;

     }

     .box2 p{

         width: 100px;

         background-color: yellow;

     }

     p{

         float: left;

     }    </style>

body:

1

2

3

4

5

6

7

8

<div class="box1">

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

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

    <p>我是文字1</p></div><div class="box2">

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

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

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

</div>

清除浮动方式二:

解决方案:

给后面的盒子添加clear:both;属性

clear属性取值:

none: 默认取值, 按照浮动元素的排序规则来排序(左浮动找左浮动, 右浮动找右浮动)
left: 不要找前面的左浮动元素(也就是:不要和前面的左浮动元素显示在一行)
right: 不要找前面的右浮动元素
both: 不要找前面的左浮动元素和右浮动元素

注意点:

当我们给某个元素添加clear属性之后, 那么这个属性的margin属性就会失效;所以不推荐使用

CSS:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<style>

        *{

            margin: 0;

            padding: 0;

        }

        body{

            border: 1px solid #000;

        }

        .box1{

            background-color: red;

        }

        .box2{

            background-color: green;

            clear: both; //给后面的盒子添加clear:both;属性

            margin-top: 28px;

        }

        .box1 p{

            width: 100px;

            background-color: blue;

        }

        .box2 p{

            width: 100px;

            background-color: yellow;

        }

        p{

            float: left;

        }    </style>

清除浮动方式三:

解决方案:

外墙法:在两个有浮动子元素的盒子之间添加一个额外的块级元素;并且设置clear: both;属性;

注意点:

外墙法它可以让第二个盒子使用margin-top属性,
外墙法不可以让第一个盒子使用margin-bottom属性,
不过可以通过设置额外标签的高度来实现margin效果;
搜狐中大量使用了这个技术,但是由于需要添加大量无意义的标签,所以不推荐使用;

CSS:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

<style>

        *{

            margin: 0;

            padding: 0;

        }

        .box1{

            background-color: red;            /*margin-bottom: 10px;*/ //外墙法不可以让第一个盒子使用margin-bottom属性,

        }

        .box2{

            background-color: green;            /*margin-top: 10px;*/  //外墙法它可以让第二个盒子使用margin-top属性,

        }

        .box1 p{

            width: 100px;

            background-color: blue;

        }

        .box2 p{

            width: 100px;

            background-color: yellow;

        }

        p{

            float: left;

        }

        .wall{

            clear: both; //设置clear: both;属性;

        }

        .h20{

            height: 20px; //设置额外标签的高度来实现margin效果;

            background-color: skyblue;

        }

    </style>

<div class="box1">

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

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

    <p>我是文字1</p></div><div class="wall h20"></div> //外墙法:在两个有浮动子元素的盒子之间添加一个额外的块级元素;<div class="box2">

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

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

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

清除浮动方式四:

解决方案:

内墙法:
1在第一个盒子中所有子元素最后添加一个额外的块级元素,
2给这个额外添加的块级元素设置clear: both;属性

注意点:

内墙法它可以让第二个盒子使用margin-top属性
内墙法它可以让第一个盒子使用margin-bottom属性

1

<a>内墙法会自动撑起盒子的高度,所以可以直接设置margin属性</a>

外墙法和内墙法区别?

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

在企业开发中<a>不常用隔墙法</a>来清除浮动 (隔墙法:外墙法和内墙法)

CSS:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

   <style>

        *{            margin: 0;            padding: 0;

        }        .box1{            background-color: red;            /*margin-bottom: 10px;*/

        }        .box2{            background-color: green;            /*margin-top: 10px;*/

        }        .box1 p{            width: 100px;            background-color: blue;

        }        .box2 p{            width: 100px;            background-color: yellow;

        }        p{            float: left;

        }        .wall{            clear: both;

        }        .h20{            height: 20px;            background-color: skyblue;

        }    </style></head>

<div class="box1">

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

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

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

    <div class="wall h20"></div> //设置内墙</div><div class="box2">

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

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

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

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

CSS的背景与精灵图

CSS的显示模式如何使用

以上就是 网页的布局方式之清除浮动的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

css什么是浮动

网页的布局方式与浮动

怎样撑起浮动父元素的高度

css怎么设置浮动

css如何清除下划线?css清除下划线有哪些方法

css中清除浮动有哪几种方式

比较总结mui页面跳转方式之间的差异

怎样使用trigger方式实现不用点击file类型的input弹出文件选择对话框

css如何关闭浮动

css中float什么意思

更多相关阅读请进入《浮动》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...