【HTML】解决DIV消除浮动问题(clear)

最新推荐文章于 2022-04-01 13:57:20 发布

AlanBlog

最新推荐文章于 2022-04-01 13:57:20 发布

阅读量3.6k

点赞数

分类专栏： HTML 文章标签： Cleatx DIV消除浮动

本文链接：https://blog.csdn.net/u011182346/article/details/83182243

版权

HTML 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

知识点:

清除（clear）的意思可以理解为把这个元素指定方向的内容给移走。例如clear:both; 就是指这个元素左右两边的内容给排除开，相当于这个元素独立成一行，其它元素不管宽度大小，都不能和这个元素并排显示。如果是clear:right；就相当于这个元素右边的内容会被排除开，但是左边的不会，仍然可以在同一行显示。

1.在一个大盒子里面放两个浮动的小盒子，这种情况大盒子会认为自己里面没内容，而恰恰我们不会给大盒子加宽度的。遇到这种问题我们经常用clear来实现！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #div_box{width: 500px;background-color: red;}
        #div_left{width: 100px;height: 100px;background-color:#0f0;margin-left:10px;float:left;}
        #div_right{width: 100px;height: 100px;background-color:#00f;margin-left:10px;float:left;}
        .clear{clear:both;}
    </style>
</head>
<body>
<div id="div_box">
    <div id="div_left"></div>
    <div id="div_right"></div>
    <div class="clear"></div>
</div>
</body>
</html>

大家可以访问我的个人网站:https://www.yykjc.cn 方便大家一起讨论

AlanBlog

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【HTML】解决DIV消除浮动问题(clear)

知识点:清除（clear）的意思可以理解为把这个元素指定方向的内容给移走。例如clear:both; 就是指这个元素左右两边的内容给排除开，相当于这个元素独立成一行，其它元素不管宽度大小，都不能和这个元素并排显示。如果是clear:right；就相当于这个元素右边的内容会被排除开，但是左边的不会，仍然可以在同一行显示。1.在一个大盒子里面放两个浮动的小盒子，这种情况大盒子会认为自己里面没内...
复制链接

扫一扫

专栏目录