css清除浮动的几种方法

最新推荐文章于 2022-05-30 20:50:29 发布

小小飞肖

最新推荐文章于 2022-05-30 20:50:29 发布

阅读量137

点赞数

分类专栏： css布局

本文链接：https://blog.csdn.net/qq_32766999/article/details/94560820

版权

css布局专栏收录该内容

9 篇文章 0 订阅

订阅专栏

清楚浮动的原理：

1.浮动元素的特点以及对父元素和自身的影响；

2.造成高度塌陷的原因以及解决办法；

首先，什么是浮动？

浮动元素是脱离文档流的，但不脱离文本流，这是什么意思呢，用过 word 的应该知道有一种图片环绕的方式是文字环绕吧，就是这种效果。

那么它有什么特点呢

对自身的影响：
float 元素可以形成块，如 span 元素。可以让行内元素也拥有宽和高，因为块级元素具有宽高
浮动元素的位置尽量靠上
尽量靠左（float:left）或右（float:right），如果那一行满足不了浮动元素的宽度要求，则元素会往下掉
对兄弟元素的影响
不影响其他块级元素的位置
影响其他块级元素的文本
上面贴非 float 元素
旁边贴 float 元素或者边框
对父级元素的影响
从布局上 “消失”
高度塌陷

<!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>
   .content{
     width: 100%;
     background: #00f;
   }
   /* 方法一：通过伪类运算符
   .content::after{
     display: block;
     height: 0;
     content: "";
     visibility: hidden;
     clear: both;
   } */
   .content{
     zoom:1 ;//ie6浏览器兼容性
   }
   /* 方法二，通过在浮动元素之后添加一个空的div
   .clearfix{
     clear: both;
   } */
  .left{
    float: left;
    height: 100px;
    background: #0f0
  }
  .right{
    float: right;
    height: 100px;
    background: #0f0
  }
  </style>
</head>
<body>
  

  <div class="content">
    <div class="left">
      左边

    </div>
    <div class="right">
      右边
    </div>
    <div class="clearfix">

    </div>
  </div>
  
</body>
</html>

方法三：父元素设置overflow:hidden 或者overflow:auto

小小飞肖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css清除浮动的几种方法

清楚浮动的原理：1.浮动元素的特点以及对父元素和自身的影响；2.造成高度塌陷的原因以及解决办法；首先，什么是浮动？浮动元素是脱离文档流的，但不脱离文本流，这是什么意思呢，用过 word 的应该知道有一种图片环绕的方式是文字环绕吧，就是这种效果。那么它有什么特点呢对自身的影响： float 元素可以形成块，如 span 元素。可以让行内元素也拥有宽和高，因为块级元...
复制链接

扫一扫