CSS学习笔记——清除浮动

最新推荐文章于 2024-06-16 22:13:37 发布

JaneLeeee

最新推荐文章于 2024-06-16 22:13:37 发布

阅读量91

点赞数

分类专栏： CSS学习笔记文章标签： css css3 html

原文链接：https://blog.csdn.net/Coder_JC_Liu/article/details/113704479

版权

CSS学习笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

参考：
https://blog.csdn.net/Coder_JC_Liu/article/details/113704479
https://blog.csdn.net/qq_44280574/article/details/108323859

清除浮动概念

在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象，这个现象叫浮动溢出。为了防止这个现象的出现而进行的CSS处理，就叫清除浮动。

具体表现如下：

左、右盒子没有float属性，可以撑开父盒子（红色边框）
（注意：通常一组<div></div>、<span></span>等类似这种语法标签组叫1个盒子）
加了float属性后，左、右盒子脱离文档流，且父盒子变为一条线，没有包围子盒子

再联系开头解释，可以理解浮动和清除浮动问题。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <style type="text/css">
      *{
        margin: 0;
        padding: 0;
      }
      .main{
        border: 2px solid red;
        width: 310px;
      }
      .left{
        background: green;
        float: left;
        height: 200px;
        width: 200px;
      }
      .right{
        background: blue;
        float: left;
        height: 100px;
        width: 100px;
      }
    </style>
</head>

<body>
  <div class="main">
    <div class="left">左</div>
    <div class="right">右</div>
  </div>

</body>
</html>

三种清除浮动的方法

较为推荐的清除浮动的三个方法为：

clear:both
overflow
:after伪元素

一、使用clear:both清除浮动

在浮动盒子后放一个空的div标签，然后给这个标签设置clear:both来清除浮动对页面的影响
优点是简单，方便兼容性好，但是一般情况下不建议使用该方法，因为会造成结构混乱，不利于后期维护

<body>
  <div class="main">
    <div class="left">左</div>
    <div class="right">右</div>
    <div style="clear: both"></div>
  </div>
</body>

在这里插入图片描述

二、使用overflow属性

给父元素设置overflow样式，可以是overflow:hidden或overflow:auto。由于overfloat:hidden 的功能是隐藏溢出，为了隐藏溢出的浮动标签，父元素不能把浮动的标签去掉，只能把它们包在父元素里面，这样使得达到撑起父元素高度的效果

.main{
  overflow: hidden;
  border: 2px solid red;
  width: 310px;
}

三、使用伪元素after清除浮动

给父级元素添加了一个:after伪元素，通过清除伪元素的浮动，达到撑起父元素高度的目的
必备三大样式：

content:""; —— content 属性指定伪元素的内容是""，因为目的是清除浮动，所以伪元素内容为空；
display:block; —— display 属性指定伪元素是块级元素，因为当使用的不是div（块级元素）而是span（内联元素）时，如果没有设置成block，clear:both; 将不会达到清除浮动的效果（注意：内联块级inline-block也不行）
clear:both; —— clear 属性指定伪元素两侧不能出现浮动元素

.main{
  border: 2px solid red;
  width: 310px;
}
.main:after{
  content: "";	/* 如果要使用伪元素，一定要设置content*/
  display: block;
  clear: both;
}

JaneLeeee

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记——清除浮动

参考：https://blog.csdn.net/Coder_JC_Liu/article/details/113704479清除浮动概念在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象，这个现象叫浮动溢出。为了防止这个现象的出现而进行的CSS处理，就叫清除浮动。具体表现如下：左、右盒子没有float属性，可以撑开
复制链接

扫一扫