html——清除浮动

浮动
所谓的“浮动”是指使元素脱离原来的文本流,在父元素中浮动起来。不会影响父级元素。
可选值有:
none:不浮动
left:左浮动
right:有浮动
清除浮动
clear可以用于清除元素周围的浮动对元素的影响
可选值有:
left:忽略左浮动
right:忽略右浮动
both:忽略全部浮动
none:不忽略浮动
BFC的特性:
1、父元素的垂直外边距不会和子元素重叠
2、开启BFC的元素不会被浮动元素所覆盖
3、开启BFC的元素可以包含浮动的子元素
-如何开启BFC?
1、设置元素浮动
2、设置元素绝对定位
3、设置元素为inline-block
4、将元素的overflow设置为一个非visible的值
haslyout——zoom:1;(IE浏览器的兼容与overflow: hidden;一起用)

### 清除浮动的最佳实践 #### 使用 `clearfix` 类清除浮动 为了防止父级元素因内部子元素浮动而发生高度坍塌的情况,可以采用 `clearfix` 方法。此方法通过伪元素在父容器内创建一个额外的块级框并设置清除两侧浮动的效果。 ```css .clearfix::after { content: ""; display: table; clear: both; } ``` 上述代码片段定义了一个名为 `.clearfix` 的 CSS 类,在该类的选择器中利用了伪元素 `::after` 来向目标元素之后插入内容为空的内容,并将其显示模式设为表格形式以便能够自动扩展宽度至包含所有兄弟节点,最后再对其应用 `clear:both;` 属性以达到清除左右两方可能存在的任何浮动物体的目的[^1]。 当需要在一个包含多个浮动子项的父容器上实施这一方案时,只需简单地给这个父容器加上相应的 class 即可: ```html <div class="container clearfix"> <div class="float-left">左侧浮动</div> <div class="float-right">右侧浮动</div> </div> ``` 这样做的好处在于无需显式地往文档结构里添加多余的 DOM 节点就能解决问题,同时也保持了良好的语义化标记习惯[^2]。 除了使用 `clearfix` 技术外,还有其他几种常见的清除浮动方式,比如直接在后续非浮动元素前加入 `<br style="clear:both;" />` 或者单独设立一个新的 div 并赋予它相同的样式声明 `style="clear:both"` 。然而这些做法往往不够优雅且容易破坏原有的布局逻辑,因此并不被广泛推崇作为首选解决方案[^3]。 对于现代浏览器环境而言,还可以考虑借助 Flexbox 布局模型来规避传统意义上的浮动问题——即让容器内的项目按照指定方向排列而不必担心溢出或重叠现象的发生。不过这属于更高级别的主题范畴,不在本次讨论范围内。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值