说到浮动之前，先说一下css中margin属性的两种特殊现象
1， 外边距的合并现象：
如果两个p上下排序，给上面一个p设置margin-bottom，给下面一个p设置margin-top，那么两个margin会发生合并现象，合并以后的值较大的那个。
对于这种现象一般不用处理。
2，margin塌陷现象：
立即学习“前端免费学习笔记（深入）”；
如果一个大盒子中包含一个小盒子给小盒子设置margin-top大盒子会一起向下平移。
解决方案：
1.0给大盒子加一个边框border属性。
2.0给大盒子设置一个overflow属性。
3.0使用浮动。
补充：overflow的常用属性如下：
visible
：默认值。内容不会被修剪，会呈现在元素框之外。
Hidden：
内容会被修剪，并且其余内容是不可见的。
Scroll：
内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
Auto：
如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
浮动
浮动是css中的一个重点，为什么要使用浮动？
是为了解决一行中显示多个盒子的问题。
float：left； float ：right；
浮动有三个特点：
1，脱离标准流，不占位置。
2，会改变元素的默认显示方式margin0为block块级元素。
3， 浮动的元素只会覆盖后边的块级元素，不影响前边的块级元素。
什么是标准流？
就是浏览器默认摆放盒子的标准。
标准流的特点：
1，块级元素从上到下，独占一行。
2，行内元素，行内块级元素从左到右在一行中显示。
3，占位置。
浮动的影响以及margin1的三种办法
浮动对页面的影响：
如果一个父盒子中有一个子盒子，并且父盒子没有设置高，子盒子在父盒子中进行了浮动，那么将来父盒子的高度为0.由于父盒子的高度为0，下面的元素会自动补位，所以这个时候要进行浮动的清除。
margin2：both
1，使用额外标签法：
在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响。
.clearfix{
clear: both;
}
a.内部标签：会将这个浮动盒子的父盒子高度重新撑开
b.外部标签：会将这个浮动盒子的影响清除，但是不会撑开父盒子。
注意：一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签。
2，使用overflow属性来清除浮动：
先找到浮动盒子的父元素，再在父元素中添加一个属性，就是清除这个父元素中的子元素浮动对页面的影响。
overflow: hidden;
3，使用伪元素来清除浮动：
.clearfixmargin3 {
content: “”;//添加内容为空
margin4: 0;//内容高度为0
margin5: 0;//内容文本的高度为0
display: block;//将文本设置为块级元素
clear: both;//清除浮动
margin6: hidden;//将元素隐藏
}
.clearfix {
zoom: 1;/*为了兼容ie6*/
}
visible
：默认值。内容不会被修剪，会呈现在元素框之外。
Hidden：
内容会被修剪，并且其余内容是不可见的。
Scroll：
内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
Auto：
如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
以上就是详解css中的浮动与三种清除浮动的方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1608026.html
微信扫一扫 
支付宝扫一扫 
