css中如何清除float(2)-木庄网络博客

2022-02-25 15:36:25 PHP中文网 JavaScript 百度已收录

在父元素设置 overflow：auto

<!--为父元素设置overflow-->
<div class="wrap"  style="overflow:auto;">
<div class="wrap_main_left">.main{float:left;}</div>
<div class="wrap_side_left">.side{float:right;}</div>
</div>
<div class="footer">.footer</div>

当父元素设置了overflow：auto之后，内容元素会被修剪，超出元素不可见。

这种方式的优点是不存在结构和语义化问题，代码量极少。但缺点也很严重，当内容增多时容易因为不会自动换行而导致内容被隐藏掉，无法显示需要溢出的元素。

其实只有clear：both是用来消除float的影响。其它的几种方式都是通过隐藏内容来达到自己的目的。

相关学习视频分享：css视频教程

以上就是css中如何清除float的详细内容，更多文章请关注木庄网络博客！

返回前面的内容

相关阅读 >>

深入了解css中的will-change属性

css border-right-style属性怎么用

css怎么把字体加粗加大

更多相关阅读请进入《css》频道 >>

书籍

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » css中如何清除float

css中如何清除float

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

相关推荐

评论