清除浮动overflow: hidden和clear: both两种方法的区别

最新推荐文章于 2023-01-06 21:49:27 发布

ITDSH

最新推荐文章于 2023-01-06 21:49:27 发布

阅读量2.2k

点赞数

分类专栏：技术知识库文章标签：清除浮动 clear both overflowhidden

本文链接：https://blog.csdn.net/ITDSH/article/details/79166731

版权

技术知识库专栏收录该内容

10 篇文章 0 订阅

订阅专栏

清除浮动overflow: hidden和clear: both两种方法的区别

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style type="text/css">
        .ADiv{
            overflow: hidden;
            border: 1px solid red;
            width: 1000px;
        }
        .a1Div{
            float:left;
            border: 1px solid black;
            width:400px;
            height: 100px;
        }
        .a2Div{
            float:right;
            border:1px solid blue;
            width: 500px;
            height: 200px;
        }
        .a3Div{
            /*clear: both;*/ 
            width: 30%;
            height: 500px;
            border: 1px solid pink;
        }   
    </style>
    <body>
        <div class=" ADiv" >
            <div class="a1Div" ></div>
            <div class="a2Div" ><span>在父级标签中清除子级标签设置浮动带来的影响,用overflow:hidden;clear:both清除的是同级标签设置浮动所带来的影响</span></div>
            <div class="a3Div">
                <span>父级标签使用overflow: hidden时,父级标签的高度被高度最大的子级标签撑开;</span>
            </div>
        </div>  
    </body>
</html>

ITDSH

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
清除浮动overflow: hidden和clear: both两种方法的区别

清除浮动overflow: hidden和clear: both两种方法的区别html> head> meta charset="utf-8" /> title>title> head> style type="text/css"> .ADiv{ overflow: hidden;
复制链接

扫一扫