编程技术文章分享与教程

网站首页 > 技术文章 正文

css清除浮动 CSS清除浮动的方法

hmc789 2024-11-14 16:34:24 技术文章 2 ℃

css清除浮动

1.需要清除浮动的原因

清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题

2.清除浮动的方法1,额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）

<!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>
    .fahter{
        width: 400px;
        border: 1px solid deeppink;
    }
    .big{
        width: 200px;
        height: 200px;
        background: darkorange;
        float: left;
    }
    .small{
        width: 120px;
        height: 120px;
        background: darkmagenta;
        float: left;
    }
    .footer{
        width: 900px;
        height: 100px;
        background: darkslateblue;
    }
    .clear{
        clear:both;
    }
    </style>
</head>
<body>
    <div class="fahter">
        <div class="big">big</div>
        <div class="small">small</div>
        <div class="clear">额外标签法</div>
    </div>
    <div class="footer"></div>
</body>
</html>

不推荐的原因:添加无意义的标签，语义化差

3清除浮动方法2 给父元素添加overflow:hidden

.fahter{
        width: 400px;
        border: 1px solid deeppink;
        overflow: hidden;
    }

原理:触发了b f c

不推荐使用：因为如果父元素中的字元素内容的高度超过父元素的高度那么溢出的部分会被隐藏掉

4 清除浮动方法3 使用after伪元素清除浮动（推荐使用）

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block; // 伪元素都是内联元素， clear:both;只对块级元素起作用
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }
 
<body>
    <div class="fahter clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
        <!--<div class="clear">额外标签法</div>-->
    </div>
    <div class="footer"></div>
</body>

推荐使用:符合闭合浮动的思想，结构语义化正确

总结：

通过上面的列子，我们不难发现清除浮动的方法可以分为两类：

  1. 利用clear 属性，包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素，其实利用 :after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。
  2. 触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文)，使到该父元素可以包含浮动元素

今天清除浮动就给大家分享这么多，希望大家能够一起学习一起进步。请关注知乎，头条，掘金 ，公众号， 前端明明，大家一起学习交流前端知识。我会把这些文章的视频发布在知乎，和今日头条上，希望大家支持。

Tags：

猜你喜欢

标签列表
最新留言