html中clearfix和clear的用法-创新互联

这篇文章主要讲解了“html中clearfix和clear的用法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“html中clearfix和clear的用法”吧!

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名注册、虚拟空间、营销软件、网站建设、麒麟网站维护、网站推广。



下面就谈谈对于这两个 class 的用法,首先我们先看个例子:



代码如下:






如何在html中使用clearfix和clear











我们都知道使用浮动会产生很多未知的问题,通过上面的例子我们可以发现 class="demo" 的高度并没有被里面的 div 给撑开,这是因为里面的 div 产生浮动而脱离了该文档,因为 demo 本身没有高度,所以我们看不到它的灰色背景。当然只要给 demo 一个高度就行了,但是这就脱离了本文的目的(有时我们希望外层 div 的高度由里面的内容来决定)。

既然是浮动产生的问题,那么只要清除浮动就可以了,相信高手们有很多清除浮动的方法,比如 overflow:hidden。下面我将介绍用 clearfix 和 clear 来清除浮动。



代码如下:






如何在html中使用clearfix和clear




用 clear 清除浮动







用 clearfix 清除浮动









我们发现,clearfix 主要是用在浮动层的父层,而 clear 主要是用在浮动层与浮动层之间,和浮动层同一级,如果想要撑开父层的高度,clear 就要放在最后。

很难说明这两个方法哪个更好,只能说具体需求具体对待。



感谢各位的阅读,以上就是“html中clearfix和clear的用法”的内容了,经过本文的学习后,相信大家对html中clearfix和clear的用法这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联网站建设公司,,小编将为大家推送更多相关知识点的文章,欢迎关注!


分享标题:html中clearfix和clear的用法-创新互联
网站网址:http://abwzjs.com/article/csecse.html