欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

css float与clear详解

程序员文章站 2022-05-20 13:07:25
...
<pre name="code" class="html">

1.浮动的历史

大家知道吗？最早的浮动初衷就是为了实现文字环绕的效果，类似于一张图片在左上角，然后其周围都是文字环绕着它，这个场景相信大家都见过吧！然而，浮动衍生至今，我们需要用到它的地方已经太多太多，最常用的就是导航的实现，还有其它方面的应用，比如单侧固定，另一侧自适应等等（这在下面将会有例子），下面会分几个方面对浮动做介绍。

2.浮动的影响

相信float属性是前端工程师切图必备的一个样式效果，如果你没用过， 呵呵！！！本文不针对你。大家在用得爽的同时，有没有想过它会带来的问题呢！没错，浮动就是一柄双刃剑，用它来实现想要的效果是很爽，但是如果用的不当就会自食其恶果。

首先，大家要知道，任何加了float不为none属性的元素，它的display都会变成block,也就是说浮动元素就是块级元素，不管它本来是什么！

其次，大家要明白，浮动会造成父元素的塌陷，有一种官方的说法就是BFC(block format context),至于为什么会这样，大家可以去查阅相关资料。那怎样解决这种问题呢，自然就是清浮动了，也就是clear。

但是清浮动也不仅仅就是用clear一个属性就完了，因为涉及到浏览器的兼容性问题，标准而使用的方法就是下面这个方法：

.clearfix{*zoom:1;}
.clearfix:after{display: table;clear: both;content: '';}

清楚浮动用这些属性足以，而且兼容IE7+以及其它W3C浏览器，这里说下zoom属性，这个属性只在IE7及以下有效果。

3.浮动实现的效果

首先说说左侧固定，右侧自适应的布局，代码及效果图如下：

<style>

body { font-size: 14px; background-color: #DDF3F7; color: #333; }
.clearfix{*zoom:1;}
.clearfix:after{display: table;clear: both;content: '';}
.wrap{width: 500px;height: 30px;line-height: 30px;margin: 20px auto;}
.left{float: left;width:100px;margin-right:10px;border: 1px solid #ddd;}
.rightbox{margin-left: 115px;}
</style>
</head>

<body>
<p class="wrap clearfix">
<p class="left">
	我在左侧我在左侧我在左侧我在左侧我在左侧我在左侧我在左侧我在左侧
</p>
<p class="rightbox">
	我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右我在右侧我在右侧我在右侧我在右侧我在右侧我在右
</p>
</body>

效果图：

css float与clear详解

这样不管最外层的p的宽度为多少，左侧的宽度是不变的，只有右侧的宽度会自动改变。

还有另外一种实现方法：

<style>
body { font-size: 14px; color: #333; }
.clearfix{*zoom:1;}
.clearfix:after{display: table;clear: both;content: '';}
.wrap{width: 500px;height: 30px;line-height: 30px;margin: 20px auto;}
.left{float: left;margin-right:10px;border: 1px solid #ddd;}
.rightbox{display: table-cell;*width: auto;*display: inline-block;}
</style>
</head>

<body>
<p class="wrap clearfix">
<p class="left">
	我在左侧我在左侧我在左侧我在左侧我
</p>
<p class="rightbox">
	我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右侧我在右
</p>
</body>

第二个是根据左侧的宽度右侧自适应的例子，大家可以运行着看看。











以上就是css float与clear详解的详细内容，更多请关注其它相关文章！

相关标签： float clear css

上一篇： 女，人力资源岗位，毕业5年，想转行web前端？

下一篇： 了解CSS中的@ AT规则_html/css_WEB-ITnose

推荐阅读