清除浮动的四种方法

最新推荐文章于 2024-07-17 09:05:07 发布

喜某人

最新推荐文章于 2024-07-17 09:05:07 发布

阅读量99

点赞数

分类专栏： css 文章标签：前端 java servlet

本文链接：https://blog.csdn.net/Syflyy/article/details/125387803

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

为什么要清除浮动?

当父元素在没有设置高度的情况下，子元素设置了float，此时，父元素的高度就会为0

<!DOCTYPE html>
<html>
<head>
<title>清除浮动</title>
<style>
      .parent{
              // 父元素没有设置高度
              // 它的高度是由子元素撑开的(子元素没设置浮动的情况下)
             width:500px;
             background-color:pink;
             }
      .son{
          float:left   // 设置浮动，子元素脱标
          width:200px
          height:200px
          background-color:skyblue;
           }
 </style>
</head>
<body>
   <div class="parent">
           <div class="son"></div>
    </div>
</body>
</html>

清除浮动的四种方法！

1.额外标签法（clear:both）--填加额外子标签

<!DOCTYPE html>
<html>
<head>
<title>清除浮动</title>
<style>
      .parent{
              // 父元素没有设置高度
              // 它的高度是由子元素撑开的(子元素没设置浮动的情况下)
             width:500px;
             background-color:pink;
             }
      .son{
          float:left   // 设置浮动，子元素脱标
          width:200px
          height:200px
          background-color:skyblue;
           }
      .clear{
             clear:both
             }
 </style>
</head>
<body>
   <div class="parent">
           <div class="son"></div>
      /* 额外标签*/
     <div class="clear"></div>
    </div>
</body>
</html>

2.overflow(溢出隐藏)---给父元素添加

<!DOCTYPE html>
<html>
<head>
<title>清除浮动</title>
<style>
      .parent{
              // 父元素没有设置高度
              // 它的高度是由子元素撑开的(子元素没设置浮动的情况下)
             width:500px;
             background-color:pink;
             overflow:hidden;   //超出部分隐藏
             }
      .son{
          float:left   // 设置浮动，子元素脱标
          width:200px
          height:200px
          background-color:skyblue;
           }
      
 </style>
</head>
<body>
   <div class="parent">
           <div class="son"></div>
    </div>
</body>
</html>

3.::after伪元素

<!DOCTYPE html>
<html>
<head>
<title>清除浮动</title>
<style>
      .parent{
              // 父元素没有设置高度
              // 它的高度是由子元素撑开的(子元素没设置浮动的情况下)
             width:500px;
             background-color:pink;
             }
      .son{
          float:left   // 设置浮动，子元素脱标
          width:200px
          height:200px
          background-color:skyblue;
           }
      .parent::after{
          content:'';
          display:block;
          height:0;
          clear:both;
           }
 </style>
</head>
<body>
   <div class="parent">
           <div class="son"></div>
    </div>
</body>
</html>

4.双伪元素(::before和::after)

<!DOCTYPE html>
<html>
<head>
<title>清除浮动</title>
<style>
      .parent{
              // 父元素没有设置高度
              // 它的高度是由子元素撑开的(子元素没设置浮动的情况下)
             width:500px;
             background-color:pink;
             }
      .son{
          float:left   // 设置浮动，子元素脱标
          width:200px
          height:200px
          background-color:skyblue;
           }
      .parent::after,.parent::before{
          content:'';
          display:table;
           }
      .parent::after{
           clear:both
           }
 </style>
</head>
<body>
   <div class="parent">
           <div class="son"></div>
    </div>
</body>
</html>