27、clear

最新推荐文章于 2021-08-24 17:22:10 发布

五仁卤鸡翅

最新推荐文章于 2021-08-24 17:22:10 发布

阅读量158

点赞数

分类专栏： css 文章标签： css css3

本文链接：https://blog.csdn.net/MoonNight608/article/details/106932316

版权

css 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

文章目录

介绍
clear
clear 解决高度塌陷

介绍

本文是在学习CSS时做的学习笔记，所有笔记内容为 CSS学习笔记

clear

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
div{
    font-size:50px;
}
.box1{
    width:200px;
    height:200px;
    background-color:#bfa;
    float:left
}
.box2{
    width:400px;
    height:400px;
    background-color:#ff0;
    float:right;
}
.box3{
    width:200px;
    height:200px;
    background-color:orange;
    
    由于box1、box2的浮动，导致box3位置上移
         也就是box3受到了box1、box2浮动的影响，位置发生了改变
      
      如果我们不希望某个元素因为其它元素浮动的影响而改变位置
        可以使用clear属性来清除浮动元素对当前元素所产生的影响  
      
      clear
         -作用，清除浮动元素对当前元素所产生的影响
         - 可选值，
            left  清除左侧浮动元素对当前元素的影响
            right 清除右侧浮动元素对当前元素的影响 
            both  清除两侧中最大影响的那侧 
         原理：
            设置清除浮动以后，浏览器会自动为元素添加一个上外边距
               使其位置不受其它元素的影响                 
 
   clear:both;
}

</style>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>

clear 解决高度塌陷

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>
.box1{
    border:10px red solid;
    // 可以开启BFC
    // overflow:hidden;
}
.box2{
    width:100px;
    height:100px;
    backgrund-color:#bfa;
    float:left;
}
// 使用伪元素代替
//.box3{
    // 清除浮动元素对其影响，使得box1需要包裹住box3,撑起了box1
    // clear:both;
// }
// 伪元素默认为行内元素
box1::after{
    content:'';
      // 清除浮动元素对其影响，使得box1需要包裹住box3,撑起了box1
    clear:both;
    display:block;// 设置为块元素
}

</style>
<body>
<div class="box1">
    <div class="box2"></div>
    // <div class="box3"></div> 可以使用after 伪元素替换
</div>

</body>
</html>