【前端学习 - CSS（10）浮动】

宇六岁鸭

于 2022-02-21 08:45:00 发布

阅读量109

点赞数

分类专栏：前端 CSS 文章标签： css css3 html

本文链接：https://blog.youkuaiyun.com/weixin_60364883/article/details/123036540

版权

前端 CSS 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了清除浮动的方法，包括设置父元素高度、添加空div、使用overflow隐藏和使用zoom属性。重点解析了clear:both的作用，它用于阻止元素在浮动元素的两侧排列。最佳实践推荐使用clearfix伪类来实现浮动元素的清理，以保持布局稳定性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 浮动

清除浮动的方法：

父级盒子定义高度（height）;
最后一个浮动元素后面加一个 div 空标签，并且添加样式 clear: both;
包含浮动元素的父级标签添加样式 overflow 为 hidden/both;
父级 div 定义 zoom;

最好的方法：

clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;

那么,clear:both;到底起了什么作用？？？

clear 是 CSS 中的定位属性，规定元素的哪一侧不允许其他元素浮动。那么 clear:both 就是规定在左右两侧均不允许元素浮动。
clear 属性只能在块级元素上其作用，这就是清除浮动样式中 display:block 的作用。
另外 visibility: hidden; height: 0; 只要 content 的值为空, 写不写都无所谓。