css --- 清除浮动

有时我们需要用到浮动,但又不想由于浮动的某些特性影响布局,这时就需要清除浮动
清除浮动主要应用的是CSS中的clear属性,clear属性定义了元素的哪一侧不允许出现浮动元素.
下面是两种应用比较广泛的清除浮动的方法:

// 在需要的地方添加定义了clear:both的空标签
<style>
html body div.clear,
html body span.clear
{background: none;border: 0;clear: both;                        /* 这句是重点, 其他都是兼容性代码 */display: block;float: none;font-size: 0;margin: 0;padding: 0;overflow: hidden;visibility: hidden;width: 0;height: 0;
}
/* 在需要清除浮动的元素后面添加 <div class="clear"> </div> 即可 */

上面是一个"万能"的清除浮动代码,可以在不同的浏览器下兼容

// 对父元素使用:after伪类
.clearfix:after {content: "020";display: bloack;height: 0;clear: both;
}
.clearfix {zoom: 1;}.left {float: left;}.right {float: right;}<div class= "div1 clearfix"><div class="left">Left</div><div class="right>Right</div>
</div>
/* 使用调试工具可以看到,父元素的高度不再为0了 */

参考《CSS高效开发实战》P21

css --- 清除浮动相关推荐

CSS清除浮动大全共8种方法
清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的 ...
CSS清除浮动_清除float浮动
CSS清除浮动方法集合一.浮动产生原因 - TOP 一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. ...
CSS——清除浮动的六种解决方案
CSS--清除浮动的六种解决方案参考文章: (1)CSS--清除浮动的六种解决方案 (2)https://www.cnblogs.com/iwilling/p/8485608.html (3)htt ...
活学活用，CSS清除浮动的4种方法
清除浮动这个问题,做前端的应该再熟悉不过了,咱是个新人,所以还是记个笔记,做个积累,努力学习向大神靠近. CSS清除浮动的方法网上一搜,大概有N多种,用过几种,说下个人感受. 1.结尾处加空div标签 ...
css清除浮动的原理
最近学习css发现了高度塌陷时候要清除浮动,为了理解清楚浮动原理,网上找了不少资料,发现都写的不是很清楚,而且都是一模一样的内容,我在里分享一下我对清楚浮动原理的理解, 如果你已经很了解什么是浮动和浮 ...
[css] 清除浮动的方式有哪些及优缺点？
[css] 清除浮动的方式有哪些及优缺点? 什么是盒子塌陷? 外部盒子本应该包裹住内部的浮动盒子,结果却没有.问题出现的原因父元素只包含浮动元素,那么它的高度就会塌缩为零(前提就是你们没有设置高度( ...
div为空的时候浮动没有效果_3种CSS清除浮动的方法
点击上方 "前端技术精选" 关注,星标或者置顶 12点00分准时推送,第一时间送达作者:html中文网 | 编辑:前端妹来源:html.cn/web/css/19613.htm ...
一、css清除浮动方法学习笔记总结（超详细，简单易懂）
** css清除浮动方法学习笔记总结(超详细,简单易懂) ** 问题: 上图中,由于container(父级元素)未设置高度,其内部子元素设置了float浮动,导致与container同级(也就是co ...
CSS外边距合并和CSS清除浮动
外边距合并外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者. 外边距合并(叠加)是一个相当简单的概念.但是,在实践中对网页 ...
CSS清除浮动清除float浮动
一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了. 1.背景不能显示由于浮动产生,如果对父级设置了(CSS b ...

css --- 清除浮动

css --- 清除浮动相关推荐

最新文章

热门文章