CSS清除浮动

最新推荐文章于 2024-09-05 04:25:37 发布
最新推荐文章于 2024-09-05 04:25:37 发布
阅读量333 收藏
点赞数
分类专栏： 学习 css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012857153/article/details/65626772
版权
学习 同时被 2 个专栏收录
21 篇文章 0 订阅
订阅专栏
css
12 篇文章 0 订阅
订阅专栏

CSS清除浮动的方法

相信很多刚入前端的道友都会对清除浮动很陌生，我也一样不知道怎么回事，看了很多资料，有了一定了解。这是一项前端页面设计必备的知识点。

方法一
设置父级容器的高度，自己撑起来。

<!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>父级设置高度去除浮动</title>
    <style type="text/css">
        .content {
            background: #000080;
            border: 1px solid red;
            /*解决代码*/
            height: 200px;
        }

        .footer {
            background: #800080;
            border: 1px solid red;
            height: 100px;
            margin-top: 10px
        }

        .left {
            float: left;
            width: 20%;
            height: 200px;
            background: #DDD
        }

        .right {
            float: right;
            width: 30%;
            height: 80px;
            background: #DDD
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="left">Left</div>
        <div class="right">Right</div>
    </div>
    <div class="footer">
        footer
    </div>
</body>

</html>

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。

优点：简单、代码少、容易掌握

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

建议：不推荐使用，只建议高度固定的布局时使用

方法二
通过设置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>设置clear:both </title>
    <style type="text/css">
        .content {
            background: #000080;
            border: 1px solid red
        }

        .footer {
            background: #800080;
            border: 1px solid red;
            height: 100px;
            margin-top: 10px
        }

        .left {
            float: left;
            width: 20%;
            height: 200px;
            background: #DDD
        }

        .right {
            float: right;
            width: 30%;
            height: 80px;
            background: #DDD
        }
        /*清除浮动代码*/

        .clearfloat {
            clear: both
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="left">Left</div>
        <div class="right">Right</div>
        <div class="clearfloat"></div>
    </div>
    <div class="footer">
        footer
    </div>
</body>

</html>

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度

优点：简单、代码少、浏览器支持好、不容易出现怪问题

缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好

建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法

方法三
父级容器定义 伪类:after 和 zoom 

<!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>伪类:after 和 zoom </title>
    <style type="text/css">
        .content {
            background: #000080;
            border: 1px solid red;
        }

        .footer {
            background: #800080;
            border: 1px solid red;
            height: 100px;
            margin-top: 10px
        }

        .left {
            float: left;
            width: 20%;
            height: 200px;
            background: #DDD
        }

        .right {
            float: right;
            width: 30%;
            height: 80px;
            background: #DDD
        }
        /*清除浮动代码*/

        .clearfloat:after {
            display: block;
            clear: both;
            content: "";
            visibility: hidden;
            height: 0
        }

        .clearfloat {
            zoom: 1
        }
    </style>
</head>

<body>
    <div class="content clearfloat">
        <div class="left">Left</div>
        <div class="right">Right</div>
    </div>
    <div class="footer">
        footer
    </div>
</body>

</html>

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题

优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）

缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。

建议：推荐使用，建议定义公共类，以减少CSS代码。

方法四
父级容器定义 overflow:hidden 

<!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>overflow: hidden</title>
    <style type="text/css">
        .content {
            background: #000080;
            border: 1px solid red;
            /*解决代码*/
            width: 98%;
            overflow: hidden
        }

        .footer {
            background: #800080;
            border: 1px solid red;
            height: 100px;
            margin-top: 10px;
            width: 98%
        }

        .left {
            float: left;
            width: 20%;
            height: 200px;
            background: #DDD
        }

        .right {
            float: right;
            width: 30%;
            height: 80px;
            background: #DDD
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="left">Left</div>
        <div class="right">Right</div>
    </div>
    <div class="footer">
        footer
    </div>
</body>

</html>

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度

优点：简单、代码少、浏览器支持好

缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。

建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。

方法五
父级容器定义 overflow:auto 

<!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>overflow: auto</title>
    <style type="text/css">
        .content {
            background: #000080;
            border: 1px solid red;
            /*解决代码*/
            width: 98%;
            overflow: auto
        }

        .footer {
            background: #800080;
            border: 1px solid red;
            height: 100px;
            margin-top: 10px;
            width: 98%
        }

        .left {
            float: left;
            width: 20%;
            height: 200px;
            background: #DDD
        }

        .right {
            float: right;
            width: 30%;
            height: 80px;
            background: #DDD
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="left">Left</div>
        <div class="right">Right</div>
    </div>
    <div class="footer">
        footer
    </div>
</body>

</html>

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度

优点：简单、代码少、浏览器支持好

缺点：内部宽高超过父级div时，会出现滚动条。

建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

参考文章http://www.jb51.net/css/173023.html

55145848
关注
专栏目录
css清除浮动无效,css清除浮动的处理方法
weixin_36300623的博客
08-03 1496
根据《精彩绝伦的css》JS Bin.news{outline:1px solid pink}.col{float: left;width:33%;outline:1px solid blue;}some text-oneConHugeCo has permanently altered the theory of niches. What do we morph? Anything and ev...
css清除浮动无效,CSS清除浮动方法总结
weixin_36002897的博客
08-03 1344
清除浮动的原因假设一个 div 内部有个浮动的 div，当内部 div 的高度要比外层的父级 div 高度大时，将会导致父级 div 高度无法随着内部 div 的高度自适应，这是由于浮动元素已经脱离了正常文档流，因此无法对父级元素产生影响。举例如下：复制代码代码如下:#a {width: 100px;border: 1px solid #ccc;}#b {height: 50px;float: l...
CSS 清除浮动
韬光养晦
07-25 1037
CSS 清除浮动
CSS清除浮动方法
rubylLc的博客
04-29 487
当子元素使用浮动（float）布局时，它们会脱离正常的文档流，这意味着父元素不会“看到”这些浮动子元素的高度。如果父元素没有设置具体的高度，它将不会围绕浮动元素展开，这可能导致父元素的高度塌陷为0，从而影响布局和样式。浮动元素可能会与周围的文本或内联元素重叠，导致文本环绕浮动元素，这在某些情况下可能是期望的效果，但在其他情况下则可能导致布局混乱。当父盒子不设置高度，内部放三个盒子，未给三个盒子设置浮动，则他们会默认撑开父盒子。浮动元素可能会与其他元素重叠，特别是在没有正确设置元素之间的间距或边界时。
前端CSS：CSS清除浮动
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-28 1079
在CSS布局中，浮动是一种常用的技术，用于创建复杂且灵活的布局。然而，浮动元素会导致其父元素和其他元素布局上的问题，这些问题通常需要通过清除浮动来解决。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。接下来，您可以尝试在自己的项目中实践这些技巧，以提高网页布局的质量和性能。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，时，该元素会创建一个新的块级格式化上下文，从而自动清除内部的浮动元素。专栏系列（点击解锁）
CSS清除浮动的3种方式
m0_47013706的博客
02-29 1632
BFC:(Block Formatting Context):格式化上下文，是web页面中css盒式模型的一种渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。具体使用如下代码所示：< style > /*内联样式*/ /* BFC */ .div1 {*/ /* 1. BFC ，使其成为BFC的其中一个条件*/ } .div2 {
6.2 CSS清除浮动的方法
最新发布
Python老吕的博客
09-05 767
与 Flexbox 一样，Grid 布局提供了一种更为现代和强大的方法来处理布局，它可以自动处理子元素的位置，包括那些可能被设置为浮动的元素。在CSS布局中，浮动元素可能会导致父元素的高度塌陷，因为浮动元素不在文档流中，父元素无法正确计算其高度。布局，即弹性布局，是CSS3引入的一种更加高效和强大的布局模式。这样，即使父元素内部有浮动元素，父元素也能够正确地包裹所有子元素，包括非浮动的子元素。假设你有一个包含两个浮动元素的容器，你希望容器能够正确显示这两个元素，即使它们的高度超出了容器的初始高度。
css清除浮动的几种方式
潮汐未见潮落的博客
05-30 1万+
CSS 清除浮动的几种常用方法
CSS清除浮动的三种方法【前端开发】
2401_84097774的博客
04-19 814
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。我特地针对初学者整理一套前端学习资料，免费分享给大家，戳这里即可免费领取少时间的问题而已，没啥难的，所以就是『会的不难』。我特地针对初学者整理一套前端学习资料，免费分享给大家，戳这里即可免费领取。
css清除浮动的几种方法以及对应规范说明
01-19
}设置了clear 属性的元素，其上边框位置会紧贴浮动元素的 margin-bottom 边界位置渲染，使包含浮动元素的容器高度正常。所以适用于浮动元素后面容器之内有个非浮动元素，或是额外添加一个新的空元素。 2、.after-...
css 清除浮动的新方法
09-25
在上述文件中介绍了一种新的CSS清除浮动方法，这种方法通过伪元素（:after）来清除浮动，避免了额外的HTML标签。具体实现是在浮动元素的父元素上添加一个clearfix类，然后利用CSS的伪元素来清除浮动，伪元素在文档中...
CSS 清除浮动Clear
09-25
当我们提到“CSS 清除浮动Clear”时，我们实际上是在讨论如何解决由于浮动元素导致的布局问题。 在上述例子中，红色方块通过设置`float: left;`使其浮动到左侧，从而允许蓝色方块与其在同一行。这种布局方式在多列...
CSS 清除浮动方法大全
09-25
以下是对几种常见的CSS清除浮动方法的详细解释： 1. **伪类`:after`**： 使用CSS的`:after`伪类可以添加一个看不见的元素来清除浮动。通过设置`content: ""`和`clear: both`，这个看不见的元素将强制父元素扩展以...
input文本域选中后会出现蓝边框。去除方式
热门推荐
u012857153的博客
03-22 3万+
input文本域选中后会出现蓝边框。去除方式
vue-cli开发环境跨域问题解决方案
u012857153的博客
05-08 1万+
前后端分离开发中必要会遇到的问题—跨域。
自定义vue组件发布到npm
u012857153的博客
06-23 7704
自定义组件打包发布为什么会有这个想法呢，主要是vue项目中自定义的组件在多个项目中使用。导致修改bug的时候，总是要在项目分支中修改，然后同步到主线上，这样容易导致分支修改后没有同步到主线，慢慢的就会导致组件版本不统一，而导致升级组件很繁琐，最后可能都要去维护多个组件的不同版本，这样不是我们想要的。 所以就打算将组件打包发布到npm上，每个项目中只需要在package.json中修改组件版本即可同
array.slice.call 对象转数组
u012857153的博客
04-26 1930
在js的学习中，经常看到Array.prototype.slice.call(arguments)
CSS清除浮动：方法与实战解析
"CSS清除浮动的方法详解" 在网页布局中，浮动元素经常被用来实现各种复杂的布局效果，如图文混排。然而，浮动元素会导致其父元素的高度塌陷，即父元素无法自然包含其内部浮动子元素，从而引发一系列布局问题。为了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值