css清除浮动的方法

最新推荐文章于 2024-10-15 23:52:46 发布
最新推荐文章于 2024-10-15 23:52:46 发布
阅读量136 收藏
点赞数
分类专栏： 杂记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44114279/article/details/106150559
版权

什么时候我们需要清除浮动呢？

在进行页面css布局的时候，有时候给容器内的元素添加浮动的时候，容器的高度会变成零或者其他一些错误从而导致整个页面布局混乱。

这主要是因为当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局。这个现象叫浮动溢出
为了解决浮动溢出的现象，所以我们需要对浮动进行清除

清除浮动的几种主要方法

方法一：设置clear：both属性

当浮动溢出的容器内，如果容器内元素全部都是要设置浮动，那么在容器内的最后新加一个空的<div></div>标签，对这个标签进行属性添加clear：both，如果容器内的最后一个元素不必浮动，在最后一个元素的css添加clear：both也可。

使用这种方法清除了浮动，父元素自动检测子盒子最高的高度，然后与其同高。

优点：通俗易懂，方便

缺点：添加无意义标签，语义化差

不建议使用。

方法二：使用CSS的overflow属性触发BFC规则

给容器添加overflow属性，overflow: hidden;或者overflow: auto;

优点：代码简洁

缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素

不建议使用。

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

优点：符合闭合浮动思想，结构语义化正确

缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.

推荐使用

方法四：使用before和after双伪元素清除浮动
.clearfix:after,.clearfix:before{
    content: "";
    display: table;
}
.clearfix:after{
    clear: both;
}
.clearfix{
    *zoom: 1;
}

优点：代码更简洁

缺点：ie6-7用zoom:1触发hasLayout.

方法五：给浮动的元素的容器添加浮动

给浮动元素的容器也添加上浮动属性floar:left即可清除内部浮动
缺点：使其整体浮动，影响布局
不推荐使用

参考链接①https://zhuanlan.zhihu.com/p/94697222

勾勾g
关注
专栏目录
css清除浮动无效,CSS清除浮动方法总结
weixin_36002897的博客
08-03 1367
清除浮动的原因假设一个 div 内部有个浮动的 div，当内部 div 的高度要比外层的父级 div 高度大时，将会导致父级 div 高度无法随着内部 div 的高度自适应，这是由于浮动元素已经脱离了正常文档流，因此无法对父级元素产生影响。举例如下：复制代码代码如下:#a {width: 100px;border: 1px solid #ccc;}#b {height: 50px;float: l...
css清除浮动无效,css清除浮动的处理方法
weixin_36300623的博客
08-03 1512
根据《精彩绝伦的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中的浮动以及如何清除浮动
qq_44901374的博客
05-12 1166
目录1、CSS布局的三种机制2、浮动什么是浮动浮动的应用清除浮动2、定位什么是定位边偏移定位模式 1、CSS布局的三种机制 普通流 普通流分两种情况： 1、块级元素独占一行，从上到下顺序排列 2、行内元素按照顺序，从左到右顺序排列，碰到父元素边缘自动换行 浮动 让盒子从普通流中浮动起来，让多个块级盒子一行显示 定位 将盒子定在某一个位置 2、浮动 什么是浮动 概念：元素的浮动指设定了浮动属性的元素，脱离了标准流的控制 作用：主要是为了让多个盒子水平排列 在CSS中添加float属性定义浮动 选择器 {
纯css制作的打勾（√）小图标
热门推荐
eillen的博客
03-06 4万+
实现效果：代码：&lt;html&gt;&lt;head&gt;&lt;title&gt;&lt;/title&gt;&lt;style type="text/css"&gt;/**绿色勾*/.myicon-tick-checked {display: inline-block;position: relative;width: 15px;height: 15px;border-radius: 5...
css-清除元素浮动的常用四种方法
乌药ice
01-10 1741
什么是元素浮动？ 当元素定义float属性来实现布局，这时候元素会脱离文档流，漂浮在页面上，影响其他网页元素(div盒子)的布局。 所以，我们要清除浮动，让其他元素保持原布局。 方法一：额外标签法 通过在浮动元素末尾添加一个空的标签（ <div style="clear:both"></div> ），W3C推荐做法。 清除浮动前： 清除浮动后： 代码： <!DOCTYPE html> <html lang="en"> <head> &l
CSS清除浮动方法
rubylLc的博客
04-29 522
当子元素使用浮动（float）布局时，它们会脱离正常的文档流，这意味着父元素不会“看到”这些浮动子元素的高度。如果父元素没有设置具体的高度，它将不会围绕浮动元素展开，这可能导致父元素的高度塌陷为0，从而影响布局和样式。浮动元素可能会与周围的文本或内联元素重叠，导致文本环绕浮动元素，这在某些情况下可能是期望的效果，但在其他情况下则可能导致布局混乱。当父盒子不设置高度，内部放三个盒子，未给三个盒子设置浮动，则他们会默认撑开父盒子。浮动元素可能会与其他元素重叠，特别是在没有正确设置元素之间的间距或边界时。
CSS浮动、清除浮动
最新发布
2302_80916083的博客
10-15 957
为了防止浮动溢出现象的出现而进行的CSS处理,叫作清除浮动。清除浮动即清除掉元素 float 属性。使用清除浮动不仅能够解决页面错位的现象,还能解决子级元素浮动导致父级元素背景无法自适应子级元素高度的问题。浮动可以使元素向左或向右移动，其周围的元素也会重新排列。float属性定义元素在哪个方向浮动,任何元素都可以浮动，而浮动元素就会变成一个块状元素。父盒高度塌陷后，会影响父盒兄弟盒的布局。浮动的元素会脱离文档流，漂浮在文档流上方，在文档流中不占位置，后边的元素向前移动。
6.2 CSS清除浮动的方法
Python老吕的博客
09-05 775
与 Flexbox 一样，Grid 布局提供了一种更为现代和强大的方法来处理布局，它可以自动处理子元素的位置，包括那些可能被设置为浮动的元素。在CSS布局中，浮动元素可能会导致父元素的高度塌陷，因为浮动元素不在文档流中，父元素无法正确计算其高度。布局，即弹性布局，是CSS3引入的一种更加高效和强大的布局模式。这样，即使父元素内部有浮动元素，父元素也能够正确地包裹所有子元素，包括非浮动的子元素。假设你有一个包含两个浮动元素的容器，你希望容器能够正确显示这两个元素，即使它们的高度超出了容器的初始高度。
CSS 清除浮动
韬光养晦
07-25 1052
CSS 清除浮动
前端CSS：CSS清除浮动
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-28 1107
在CSS布局中，浮动是一种常用的技术，用于创建复杂且灵活的布局。然而，浮动元素会导致其父元素和其他元素布局上的问题，这些问题通常需要通过清除浮动来解决。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。接下来，您可以尝试在自己的项目中实践这些技巧，以提高网页布局的质量和性能。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，时，该元素会创建一个新的块级格式化上下文，从而自动清除内部的浮动元素。专栏系列（点击解锁）
CSS 清除浮动方法大全
09-25
以下是对几种常见的CSS清除浮动方法的详细解释： 1. **伪类`:after`**： 使用CSS的`:after`伪类可以添加一个看不见的元素来清除浮动。通过设置`content: ""`和`clear: both`，这个看不见的元素将强制父元素扩展以...
CSS清除浮动方法汇总
10-20
本文将汇总一些常见的CSS清除浮动的方法。 1. **传统clear属性** CSS的`clear`属性用于指定元素是否可以放在浮动元素的旁边。如果设置为`clear:left`，则元素不会出现在左侧有浮动元素的地方；`clear:right`不让...
CSS清除浮动方法小结
09-24
为了解决这个问题，有多种清除浮动的方法，本文将详细介绍四种常见的清除浮动方法。 1. **设置父元素高度** 这是最直观的方法，当知道浮动子元素的具体高度时，可以手动为父元素设置一个固定高度。例如： ```css...
CSS清除浮动方法总结
09-25
以下是对这些清除浮动方法的详细解释： 1. 加入空`div`并设置`clear: both`： 这是早期常用的清除浮动方法。在浮动元素之后添加一个额外的`<div>`元素，并设置`clear: both`，使其占据整个宽度，从而使父元素重新...
CSS清除浮动方法大全(小结)
09-22
CSS清除浮动是前端开发中常见的一个问题处理方法，它主要针对的是当子元素使用了浮动（float）属性后，无法自动撑开父元素高度的问题。这是因为浮动元素脱离了标准文档流，父元素无法检测到其高度，从而导致布局问题...
前端面试宝典
勾勾的博客
06-13 1859
面试题 公司经验 与后端沟通配合 前后端都要充分了解项目的需求 后端只提供能力（如数据库能力、消息能力、应用协同能力等等） 前端组织业务（如组织Auth、组织数据POST/GET/DELETE） 接口设计（出接口文档），前后端沟通设计接口，前端需要后台返回什么样的数据（格式），后台需要前端传递什么参数（哪些参数是必须的，哪些参数是可选的，采用get还是post，哪些数据需要前端先进行校验，哪些需要双方都校验）。共同制定出整个程序所有的接口说明，形成文档。前后台按照约定好的接口进行开发 项目遇到了的难点及解决
js中src与href的区别
勾勾的博客
05-07 1804
src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。 src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。 <script src ="js.js"></script> 当浏览器解析到该元素时，会暂停其他资源的下载和处...
addEventListener事件监听器与on函数的介绍与区别
勾勾的博客
06-13 1794
这里写目录标题一、事件监听器addEventListener()addEventListener() 方法用于向指定元素添加事件句柄。实例兼容性二、on方法三.区别addEventListener与on区别测试addEventListener测试on 一、事件监听器addEventListener() addEventListener() 方法用于向指定元素添加事件句柄。 提示： 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。 使用方
利用js实现页面刷新
勾勾的博客
05-15 1160
函数方法 1、reload reload 方法，该方法强迫浏览器刷新当前页面。 语法：location.reload([bForceGet]) 参数： bForceGet， 可选参数， 默认为 false，从客户端缓存里取当前页。true, 则以 GET 方式，从服务端取最新的页面, 相当于客户端点击 F5(“刷新”) reload() 方法用于重新加载当前文档。 如果该方法没有规定参数，或者参数是 false，它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果
8种CSS清除浮动方法详解及适用场景
CSS清除浮动是前端开发中一项至关重要的技能，因为浮动元素可能会对页面布局产生意想不到的影响，如改变容器高度、破坏行内元素的正常排列等。本文将详细介绍八种清除浮动的方法，旨在帮助前端开发者解决在实际项目...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值