关于清除浮动的方法

最新推荐文章于 2024-08-25 04:44:58 发布

转载最新推荐文章于 2024-08-25 04:44:58 发布 · 116 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Lzxgg-xl/p/10153777.html

本文介绍两种CSS清除浮动的方法：使用overflow属性隐藏浮动元素产生的影响，以及通过clearfix类为父元素添加伪元素清除浮动。适用于解决网页布局中由浮动引起的布局问题。

1.先来一种最简单的方法

overflow:hidden;

2.利用在css里面写的类 clearfix 来清除代码如下

.clearfix:after{
    visibility:hidden;
    display:block;
    font-size:0;
    content: ” “;
    clear:both;
    height:0;
}
.clearfix{*zoom:1;}   //这个是专门对 ie6的支持

转载于:https://www.cnblogs.com/Lzxgg-xl/p/10153777.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

digu2715

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

CSS:清除浮动的最优方法

09-27

传统的清除浮动方法包括使用`clear:both`、`clearfix`类或者在父元素内添加空元素等。然而，这些方法在某些情况下可能会带来额外的复杂性或者浏览器兼容性问题。通过`overflow`属性，我们可以更简洁地解决浮动元素...

关于清除浮动塌陷的几种方法总结

12-11

什么是浮动呢？定义这样说：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。...不得不想进各种hack方法解决。（没错，这里就是吐槽的IE6！）其次文档标准流，在浮

参与评论您还未登录，请先登录后发表或查看评论

《css世界》- 详细重点笔记与技巧

weixin_33810006的博客

11-20

2424

概述在《css世界》这本书中有一些“黑魔法”给列举出来，在结合自己的理解。篇幅有点长，希望大家能够坚持看完，一定会有收获！！！以下是摘自每章内一些重要的概念与技巧。其中有解决图片间隙的问题、小图标与文字居中问题等; ps: 特别是 “line-height、vertical-align”内容需要反复仔细研究阅读何为“流” 成为文档流，...

暑期学习日记20：CSS布局

weixin_48485475的博客

07-31

221

CSS布局

CSS清除浮动方法

rubylLc的博客

04-29

692

当子元素使用浮动（float）布局时，它们会脱离正常的文档流，这意味着父元素不会“看到”这些浮动子元素的高度。如果父元素没有设置具体的高度，它将不会围绕浮动元素展开，这可能导致父元素的高度塌陷为0，从而影响布局和样式。浮动元素可能会与周围的文本或内联元素重叠，导致文本环绕浮动元素，这在某些情况下可能是期望的效果，但在其他情况下则可能导致布局混乱。当父盒子不设置高度，内部放三个盒子，未给三个盒子设置浮动，则他们会默认撑开父盒子。浮动元素可能会与其他元素重叠，特别是在没有正确设置元素之间的间距或边界时。

浮动及清除浮动方法

m0_75026936的博客

03-10

346

clear:both;content:"";height:0;这种是最常用的清除浮动的方法也是最推荐的，直接在浮动的两个元素的父级加一个clearfloat类名，兼容IE6、7、8所带的浮动问题；这种清除浮动的方法只推荐没有使用position或对overflow:hidden理解比较深的朋友使用,必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度。

前端清除浮动的方法

weixin_53720617的博客

08-25

498

如果一个父盒子中有一个子盒子，并且父盒子没有设置高，子盒子在父盒子中进行了浮动，那么将来父盒子的高度为0。由于父盒子的高度为0，下面的元素会自动补位，所以这个时候要进行浮动的清除。直接在父元素上添加overflow:hidden。

清除浮动的常用方法

sinat_38944746的博客

11-24

2191

清除浮动常用方法

css清除浮动无效,CSS清除浮动方法总结

weixin_36002897的博客

08-03

1493

清除浮动的原因假设一个 div 内部有个浮动的 div，当内部 div 的高度要比外层的父级 div 高度大时，将会导致父级 div 高度无法随着内部 div 的高度自适应，这是由于浮动元素已经脱离了正常文档流，因此无法对父级元素产生影响。举例如下：复制代码代码如下:#a {width: 100px;border: 1px solid #ccc;}#b {height: 50px;float: l...

关于清除浮动的五种方法

weixin_39150852的博客

09-19

981

清除浮动的本质：为了解决父级元素印子级浮动引起内部高度为0的问题。方式1:额外标签法（w3c推荐的方法）：在最后一个浮动标签后，新添加一个标签优点：通俗易懂，书写方便。缺点：添加许多无意义的标签，结构化较差。 .clear{ 　　　clear:both; } 方式2:父级添加overflow属性方法 .father{ 　　　overflow:hidden;overfl...

清除浮动的五种方法详解

最新发布

12-03

Python练习：使用库

ArakeiShi_China-Gender-and-Sexual-Diversity-Practical-Solution_19824_1764665783520.zip

12-03

ArakeiShi_China-Gender-and-Sexual-Diversity-Practical-Solution_19824_1764665783520.zip

粮食加工库存管理系统_一款专为中小型粮食企业设计的综合性业务管理软件_该软件系统深度融合了粮食采购入库存粮管理粮食出库登记库存分类汇总成品信息管理成品出入库销售登记与退.zip

12-03

清除浮动的方法

08-16

在前端开发中，CSS清除浮动的常用方法包括以下几种： ### 方法一：使用空标签清除浮动通过在浮动元素的父容器末尾添加一个空的 `<div>` 标签，并为其设置 `clear:both` 样式来清除浮动。这种方法简单直接，但会引入无意义的 HTML 标签，不利于结构与样式的分离[^2]。 ```html <div class="container"> <div class="float-left">Left floated element</div> <div class="float-right">Right floated element</div> <div style="clear:both;"></div> </div> ``` ### 方法二：使用伪元素 `::after` 清除浮动利用伪元素 `::after` 在父容器末尾动态添加一个内容为空的块级元素，并设置 `clear:both` 样式，从而清除浮动。这种方法避免了添加无意义的 HTML 标签，推荐在现代浏览器中使用[^3]。 ```css .clearfix::after { content: ""; display: block; clear: both; } ``` ```html <div class="container clearfix"> <div class="float-left">Left floated element</div> <div class="float-right">Right floated element</div> </div> ``` ### 方法三：使用 `overflow` 属性清除浮动为父容器设置 `overflow:hidden` 或 `overflow:auto` 样式，利用块级格式化上下文（BFC）的特性自动清除内部浮动。这种方法代码简洁，但需要注意避免影响容器内部溢出内容的显示效果[^4]。 ```css .container { overflow: hidden; } ``` ### 方法四：使用 `clear` 属性单独清除特定元素浮动为需要清除浮动的元素直接设置 `clear:left`、`clear:right` 或 `clear:both` 样式，用于控制该元素与前面浮动元素的关系。这种方法适用于局部清除浮动的场景[^4]。 ```css .clear-both { clear: both; } ``` ### 方法五：Flexbox 或 Grid 布局替代浮动在现代网页布局中，可以考虑使用 Flexbox 或 CSS Grid 替代传统的浮动布局方式，从而避免浮动带来的问题。这些布局方法能够更灵活地控制元素排列和对齐方式，是推荐的替代方案[^3]。 ```css .container { display: flex; } ``` 以上方法各有优劣，选择合适的方法取决于具体的项目需求和浏览器兼容性要求。