温州天河镇CSS如何清除浮动?3种方法介绍
阅读 16336 · 发布日期 2020-08-24 11:45 · 温州优光网络科技有限公司|建站|APP小程序制作|做网站SEO推广优化
【摘要】
CSS如何清除浮动?本篇文章给大家介绍一下使用CSS清除浮动的3种方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。首先这里就不讲为什么我们要清楚浮动,反正不清除浮动事多多。下面我就讲三种常用清除浮动的方法,够用了。1、在浮动元素后面加一个空的div,并为它清除浮动html代码:
浮动
... 【温州小程序开发,温州微信公众号,平阳做网站,平阳网站建设公司,平阳小程序商城制作,昆阳万全做网站,鳌江水头小程序,萧江腾蛟微信公众号,山门顺溪南雁海西南麂凤卧麻步怀溪网络网店服务,政采云网店管理服务】...
CSS如何清除浮动?本篇文章给大家介绍一下使用CSS清除浮动的3种方法。
有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
首先这里就不讲为什么我们要清楚浮动,反正不清除浮动事多多。
下面我就讲三种常用清除浮动的方法,够用了。
1、在浮动元素后面加一个空的div,并为它清除浮动html代码:
浮动
不想被浮动影响
.wrap{
width:500px;
height:400px;
border:1px solid red;
margin:0 auto;
}
.float{
width:200px;
height:200px;
background:#ccc;
float:left;
}
.nofloat{
width:300px;
height:150px;
background:red;
}
现在虽然加了一个空的div,但是并没有给它清除浮动,所以目前的效果就是第三个子元素.nofloat还是收到浮动的影响。
OK,现在给.clear加上清除浮动:
.clear{
clear:both;
}
刷新一下效果就出来了:
PS:
这种情况比较适合元素之间是垂直排列布局的,为了不受彼此浮动的影响。
2、利用BFC特性清除浮动html代码:
浮动
不想被浮动影响
.wrap{
width:500px;
border:1px solid red;
margin:0 auto;
overflow:hidden;
}
.float{
width:200px;
height:200px;
background:#ccc;
float:left;
}
.nofloat{
width:300px;
height:150px;
background:red;
overflow:hidden;
}
效果是这样的:
这里父容器是没有设置固定高度的,本来第一个子元素浮动之后,父元素的高度会塌陷到跟第二个子元素一样高,但由于这里分别给第二个子元素和父元素都设置了overflow:hidden ,所以它们都生成了一个新的BFC区域,根据上文提供的BFC布局规则可以得知:
BFC区域不会与float box 重叠;计算BFC高度时浮动元素的高度也参与计算。
所以就得到清除浮动的效果。
说得比较绕,但其实清除浮动得根据自己开发中的实际情况合理使用。
3、使用:
after伪元素,给浮动元素的父元素清除浮动html代码:
浮动
.wrap{
width:500px;
border:1px solid red;
margin:0 auto;
}
.float{
width:200px;
height:200px;
background:#ccc;
float:left;
}
此时子元素浮动了,脱离了文档流,所以父元素高度酒塌陷了:
可以看到父元素的边框挤在一起了。
OK,现在给父元素添加一个clearfix类:
浮动
*zoom:1;
}
.clearfix:after{
content:'
clear'
;
display:block;
height:0;
clear:both;
overflow:hidden;
visibility:hidden;
}
现在刷新后的效果就是:
这种方法和BFC清除浮动个人用的比较多,实际开发中,其实这两种就够用了。
好的,清除浮动我也就简单地提到这里!如果有什么错误的话,欢迎留言指正。
相关教程推荐:
CSS视频教程 、CSS3视频教程以上就是CSS如何清除浮动?3种方法介绍的详细内容,更多请关注php中文网其它相关文章!
微信
分享相关标签:
CSS 清除浮动本文转载于:
博客园,如有侵犯,请联系a@php.cn删除
上一篇:
css如何实现按钮居中显示
下一篇:
如何利用css实现圆环效果相关文章相关视频前端常见css的面试题目2020年CSS面试题汇总(最新)谈谈CSS实现水平垂直居中布局的方法在html元素中设置css样式的方式是什么CSS如何清除浮动?3种方法介绍使用CSS3边框属性使用CSS3文本属性使用CSS3过渡属性使用CSS3动画属性使用CSS3多列布局属性 [做网站css教程]