1.float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。div一个典型的块级元素,会单独占据一行。
先看看最基本的块级元素如何排列的。html代码,以下样式都是基于此。
<div class="boxBg"> <div class="box1"> 框框1 </div> <div class="box2"> 框框2 </div> <div class="box3"> 框框3 </div> </div>
css代码:
.boxBg{ margin: 0 auto; width:500px; height:200px; border:2px solid #ccc } .box1{ width:100px; height:50px; background-color:red } .box2{ width:100px; height:50px; background-color:blue } .box3{ width:100px; height:50px; background-color:green }
执行结果:
由于div是块级元素,所以框会以纵向形式排列。在实际操作中往往需要将框横向排列。有两种方式可以实现。第一种将display:inlin-block;
.boxBg{ margin: 0 auto; width:500px; height:200px; border:2px solid #ccc } .box1{ width:100px; height:50px; background-color:red; display:inline-block } .box2{ width:100px; height:50px; background-color:blue; display:inline-block } .box3{ width:100px; height:50px; background-color:green; display:inline-block }
执行结果:
至于中间的缝隙,追溯到本质原因是元素之间的空白符引起的,所以在父元素设置fone-size的大小,可以调节空白缝隙的大小。
.boxBg{ margin: 0 auto; width:500px; height:200px; border:2px solid #ccc; font-size:34px; }
将font-size:34px之后,那么缝隙会变宽。
执行结果:
同理,要去掉缝隙,那么需要将font-size:0;
.boxBg{ margin: 0 auto; width:500px; height:200px; border:2px solid #ccc; font-size:0 }
执行结果:
如此便实现了想要的布局,框里边的文字也跟着消失了,同样也证明文字的大小影响缝隙。只需要在子元素里重新设置就可以了。当然今天的重点并不是这个。同样的效果float:left;也可以轻松实现。
<style> .boxBg{ margin: 0 auto; width:500px; height:200px; border:2px solid #ccc; } .box1{ width:100px; height:50px; background-color:red; float:left } .box2{ width:100px; height:50px; background-color:blue; float:left } .box3{ width:100px; height:50px; background-color:green; float:left } </style>
执行结果:
元素添加 float之后,此浮动元素会在其碰到父级元素边框或者另一个浮动元素边框,紧邻其后显示。例如下边的例子,在浮动元素总宽度大于父级元素时,换行,换行的时候遇到前一个float并在其后显示
<style> .boxBg{ margin: 0 auto; width:500px; height:200px; border:2px solid #ccc; } .box1{ width:100px; height:100px; background-color:red; float:left } .box2{ width:100px; height:50px; background-color:blue; float:left } .box3{ width:400px; height:50px; background-color:green; float:left } </style>
执行结果:
以下贴代码,只贴修改的部分,其他不变,结构不变。
如果去掉box3的float:left会是什么结果?按照理解,浮动元素不占据空间,也就是框框3会无视框框1,框框2直接紧邻父元素的边框显示,也就是框框1会盖住框框3?那结果呢?
.box3{ width:100px; height:50px; background-color:green; }
执行结果:
为何框3的文字会出现在下边而不是被框1覆盖?接着看代码,看图
.box3{ height:50px; background-color:green; }
执行结果:
看出不一样了没?是的。box3没有定义width;去掉了width,不定义宽度的情况下默认宽度就是父元素的宽度,也就是说此时width:500px;浮动元素覆盖非浮动元素,也就是框3前边200px的宽度被浮动元素覆盖了,之所以文字没有被覆盖而且文字被浮动元素挤在200px之后的位置,原因呢?
浮动元素不会占据块的空间,所以框三就是100%的父容器宽度 500px,但是浮动元素会占据另外的空间,也就是行框空间,通俗的讲就是文本所占的空间。
这也是图片float之后,文本会自动环绕图片的原因。浮动元素不占据块级空间,但会影响块级元素之内的文字以及内联元素。
关于css float 属性以及position:absolute 的区别。,布布扣,bubuko.com
关于css float 属性以及position:absolute 的区别。
原文:http://www.cnblogs.com/enemy/p/3750588.html