清除浮动的五种方法

于 2023-02-07 23:09:12 发布
阅读量678 收藏 1
点赞数
文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/l_h_study/article/details/128927666
版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .box{
                width: 500px;
                background-color: antiquewhite;
                /* 1.给父盒子一个高度 */
                height: 200px;
                /* 2.父盒子浮动 */
                float: left;
                /* 3.父盒子溢出隐藏 */
                overflow: hidden;
            }
            .box>.son{
                width: 200px;
                height: 200px;
                background-color: aqua;
                float: left;
            }
            .box>.son:nth-child(2){
                background-color: pink;
            }
            .clear{
                /* 4.添加空盒子 */
                clear: both;
            }
            /* 5.伪元素 内容填充 */
            .box::after{
                content: '';
                /* 转为块状 */
                display: block;
                clear: both;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="son"></div>
            <div class="son"></div>
            <div class="clear"></div>
        </div>
    </body>
</html>

LH505343
关注
常用的清除浮动的方法
JackieDYH的博客
03-02 564
清除浮动 在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动 例子 .news { background-color: gray; border: solid 1px black; } .news img { float
常见的清除浮动的五种解决办法
孙叫兽的博客
08-27 1761
方法一：使用带clear属性的空元素 在浮动元素后使用一个空元素如 <div class="clear"></div> 并在CSS中赋予 .clear{clear:both;} 属性即可清理浮动。亦可使用 <br class="clear" /> 或 <hr class="clear" /> 来进行清理。 方法二：使用CSS的overflow属性 给浮动元素的容器添加 overflow:hidden 或 overf.
HTML5 清除浮动
08-14
NULL 博文链接：https://onestopweb.iteye.com/blog/2316146
CSS清除浮动_清除float浮动
鬼之一草的专栏
09-10 1714
CSS清除浮动方法集合 一、浮动产生原因   -   TOP 一般浮动是什么情况呢？一般是一个盒子里使用了CSS float浮动属性，导致父级对象盒子不能被撑开，这样CSS float浮动就产生了。 浮动产生样式效果截图 本来两个黑色对象盒子是在红色盒子内，因为对两个黑色盒子使用了float浮动，所以两个黑色盒子产生了浮动，导致红色盒子不能撑开，这样浮动就产生了。
清除浮动代码
weixin_43507141的博客
09-08 749
清除浮动经典代码
清除浮动的代码
sixteen_cicle的博客
05-02 1038
清除浮动的问题 /*清除浮动*/ * html .fixed { height: 1% } .fixed:after { content: "."; display: block; clear: both; height: 0; visibility: hidden } .fixed { display: block; min
清除浮动的几种方法详解
09-24
以下是对清除浮动的几种常见方法的详细解析： 1. **第一种方法：使用`clear: both`** 这是最传统的清除浮动方式，通过在父元素上设置`clear: both`，阻止了父元素内的后续元素与浮动元素相邻。但是这种方法需要...
一个老外弄的Clearing floats(清除浮动的方法)
10-30
另一种清除浮动的方法是通过设置父容器的`overflow`属性为`hidden`。当一个元素的`overflow`属性设置为`hidden`时，它的内容如果溢出该元素的边界，将被裁剪而不显示。这同样可以达到清除浮动的效果，因为浮动元素会...
清除浮动的几种方法
Huang_DW的博客
08-30 527
为什么要清除浮动？ 清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题 如下: 给父盒子设置一个boder，内部放两个盒子一个big 一个small，未给big和small设置浮动，则他们会默认撑开父盒子 当我给内部两个盒子加上float属性的时候，底部的footer盒子就会顶上来，然后父盒子因为没设置高度，变成一条线，big和small已经浮动了 清除浮动的方法 一、 额外标签法： 给谁清除浮动，就在其后额外添加一个空白标签 优点： 通俗易懂，书写方便。（不推荐使用） 缺点： 添
清除css万能浮动代码
weixin_43299461的博客
06-10 1870
https://blog.csdn.net/java_goodstudy/article/details/53755518
清除浮动
初阶农民工的博客
05-17 1647
浮动的目的：把多个盒子放在一行上清除浮动的目的：解决父盒子高度为0的问题清除浮动，也称闭合浮动注：本文不兼容IE6原代码：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;清除浮动&lt;/title&gt; &lt;style type=&am
清除浮动代码收藏
张沈鹏,在路上 ...
12-26 220
http://lifesinger.org/blog/?p=614 .clearfix:after { content: "\0020"; display: block; height: 0; clear: both; } .clearfix { zoom: 1; }
CSS中清除浮动的代码
m0_51490605的博客
02-07 959
.clearfix:after { content: "\0020"; display: block; height: 0; clear: both; } .clearfix { zoom: 1; } 什么时候需要清除浮动呢？ 首先明确 浮动是要脱离标准流的 也就是说浮动起来的元素是不占有自己原先的位置的 当父元素的内容均浮动并且没有给父元素设置高度的时候 下面的标准流的元素就会顶替到上来 造成结构错乱。此时在css中添加如上的代码，并且在父元素添加cle..
浮动清除通用代码
06-25 285
浮动清除通用代码
CSS清除浮动方法
灵韵的博客
01-04 245
清除浮动是每一个 web前台设计师必须掌握的机能。css清除浮动大全，共8种方法。 浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码，在各种浏览器中显示效果也有可能不相同，这样让清除浮动更难了。解决浮动引起的问题有多种方法，但有些方法在浏览器兼容性方面还有问题。 下面总结8种清除浮动的方法（测试已通过 ie
php里清除浮动代码,四种方式进行清除浮动
weixin_35653597的博客
03-21 180
以下展示了四种方式进行清除浮动先看一段代码css.box {border: 1px solid #f00;}.fl {float: left;width: 50px;height: 50px;background: #0f0;margin: 5px;}html下面是结果因为没有清除浮动，所以子元素没有将父元素撑开，出现上面的情况。下面是几种清除浮动的方法1.额外标签法在最后一个浮动标签后，新加一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值