⑴ css的浮动以及如何清除浮动
CSS清除浮动的3种方法，参考：http://www.apiref.com/css-zh/experience/skill.htm#no9
方法1：
#test{clear:both;}
#test为浮动元素的下一个兄弟元素
方法2：
#test{display:block;zoom:1;overflow:hidden;}
#test为浮动元素的父元素。zoom:1也可以替换为固定的width或height
方法3：
#test{zoom:1;}#test:after{display:block;clear:both;visibility:hidden;height:0;content:'';}
#test为浮动元素的父元素
⑵ 第五篇：web之前端之float的几种清除浮动方式
清除浮动：clear:both；
父级div定义 overflow: auto
⑶ 清除浮动的3种方式 2021-03-21
爱, 有了浮动我们可以更加方便的布局.
恨, 有了浮动他也带来了一些副作用, 特别是在IE67上(现在几乎已经销声匿迹了).
为了避免前面元素的浮动给后面的元素带不必要的影响, 我们就需要为后面的元素清除浮动.
清除浮动的方式有很多, 只要我们把浮动的原理搞明白了, 清除浮动也是非常好理解的.
正所谓万变不离其宗
[图片上传失败...(image-7fb242-1616303772213)]
很多时候为了高度的自适应性, 我们用子元素去撑起父元素的高度
但是如果子元素浮动之后, 就无法自动撑起父元素
导致, 父元素的高度为 0 , 后面的元素就会长驱直入, 进驻到浮动元素的下方.真是悲哉.
解决这个问题最简单的办法就是 手动给浮动元素的父辈元素添加高度 .
好使是好使, 但是不够灵活.
[图片上传失败...(image-abb696-1616303772213)]
clerar 属性是 css 专门提供用来清除浮动的.
这个属性主要有三个值:
该方法虽好, 但是也有一些不足之处.
因为 clear 对那些浮动的元素没有做任何的操作, 所以浮动元素的父辈仍然没有高度(如果你没有手动添加的话)
[图片上传失败...(image-cf1f54-1616303772213)]
前面说过 clear 的本质是在清理元素顶部添加足够多的外边距
所以这个时候我们再手动添加 margin-top 就失效了.
当然, 其他三个方向的 margin 还是有效的.
[图片上传失败...(image-bd090-1616303772213)]
方法2清除浮动的最大问题是 div.content 不能设置 margin-top 无效.
于是就有了外墙隔离法.
[图片上传失败...(image-d292db-1616303772213)]
于是就有了新的演变: 内墙元素隔离法.
把元素放在外面, 影响 HTML 结构.
于是有人干脆把”隔离元素”放在内部.
[图片上传失败...(image-e6f279-1616303772213)]
内墙法, 用着很爽.
但是对有洁癖的前端工程师来说, 也不是那么的舒服: 要添加一个元素去专门的清除浮动, 不爽.
CSS3 的伪元素( :: )拯救了他们.
今天先了解一个伪元素 ::after .其他待后期课程详细道来.
你只需要知道, 给一个元素添加一个 ::after 则相当于给这个元素添加了子元素, 而且这个子元素会是他的最后一个儿子.
[图片上传失败...(image-9b96b5-1616303772212)]
前面我们学习过 over-flow 的使用, 他的作用是处理当子元素溢出的时候的情况的.
现在我们把它用到浮动元素的父容器, 然后你发现竟然….
[图片上传失败...(image-ef2fb3-1616303772212)]
清除浮动的核心理念就是想办法让浮动元素的父元素有高度, 事情就解决了.
⑷ 网页布局中，如何清除元素的浮动
清除元素浮动有多种方法，通常会使用到clear属性。
如果是清除浮动元素对兄弟级元素的影响，则在浮动元素之后的第一个兄弟级元素上设置clear属性即可。
如果是清除浮动元素对父级元素的影响，则有多种方法，比较常见的方式有两种，一种是在父级元素当中添加一个空标签，然后为空标签设置clear: both; ；另一种方法是为父级元素添加伪元素，用伪元素清除浮动，例如：
<style>
.maindiv{
float:left;
width:200px;
height:200px;
margin-right:20px;
background:#fcf;
}
.main:after{
clear:both;
display:block;
height:0;
content:"200B";
}
.main{
*zoom:1;
}
</style>
</head>
<body>
<divclass="main">
<div>言成科技</div>
<div>合作伙伴</div>
<div>HTML5学堂（码匠）</div>
</div>
更多清除浮动的方法，可以查看文章《如何清除元素的浮动》
⑸ web前端学习笔记（二）清除浮动的几种方法
1.父标签overflow:hidden
2.样式属性clear，属性值一般是both，left，right。