css中float使用大全

float是什么？浮动在CSS中的作用#wrapper{padding:20px;border:1pxsolidred;width:350px;}.floatL{width:100px;height:100px;border:1pxsolid#000;float:left;}.floatR{width:100px;height:100px;border:1pxsolid#000;float:right;}.blue{background:#6AA;}.red{background:#A66;}<div id="wrapper"><div class="floatL blue">AAAAAAAA</div></div>2.对其兄弟元素（非浮动）的影响1.如果兄弟元素为块级元素在现代浏览器和IE8+下，该元素会忽视浮动元素的而占据它的位置，并且元素会处在浮动元素的下层（并且无法通过z-index属性改变他们的层叠位置），但它的内部文字和其他行内元素都会环绕浮动元素。

需要注意的是，在IE 6、7下则分别都有不同的表现，IE 6、7中，该兄弟元素会紧跟在浮动元素的右侧，并且在IE6中两者之间留有3px的空隙。

这就是著名的“IE 3px bug”/*CSS，其他的样式按照上面给出的，此处就不再重复了*/.block{width:200px;height:150px;border:1pxsolid#000;background:#CCC;} <div id="wrapper"><div class="floatL blue">AAAAAAAA</div><div class="block">BBBBBBBBB</div></div>IE 8:2.如果如果兄弟元素为内联元素<div id="wrapper"><div class="floatL blue">AAAAAAAA</div>文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div><div id="wrapper"><div class="floatL blue">AAAAAAAA</div><img src="XXX.png"></div>对其兄弟元素（浮动）的影响1).同一个方向的浮动元素：当一个浮动元素在浮动过程中碰到同一个方向的浮动元素时，它会紧跟在它们后面，可以用这样一个形象的比喻来描述：在一个购票中心里，某人从一条购票队列跑到旁边的一条购票队列中排队，那自然先跑过去的会先占据前面的位置。

但这条购票队列还是位于当前的购票中心中，因此这条浮动的队列和正常的文档流队列也依旧在同一个父元素当中。

<div id="wrapper"><div class="floatL red">AAAAAAAA</div><div class="floatL blue">BBBBBBBBBB</div></div>2).反方向的浮动元素：正如上面的比喻所述，我们可以假设购票中心里左右两边的各有一个购票点（如图,这里我们把一个div看做一个购票者），左浮动的队列可看做左购票点的购票队列，反方向的浮动（即右浮动）则是右边购票点的购票队列，所以在购票中心足够宽的时候两条队列的人群是互不受影响的。

因此他们在同一条水平线上<div id="wrapper"><div class="floatL red">AAAAAAAA</div><div class="floatR blue">BBBBBBBBBB</div></div>但当购票中心过窄或者左右两边的购票队列过长时，其中一条队列则会另起一行排列（此处为B队列，有人可能会问为什么不是A队列另起一行？从下面HTML结构上可知，这是因为在时间上，A队列比B队列更早地建立，根据先到先得的原则，B队列的购票者在位置不够的时候自然要另起了一行了）。

<div id="wrapper"><div class="floatL red">AAAAAAAA</div><div class="floatL red">AAAAAAAA</div><div class="floatR blue">BBBBBBBBBB</div><div class="floatR blue">BBBBBBBBBB</div></div>当同一行中连一个购票者的位置都容不下时，两条队列则会错开两行<div id="wrapper"><div class="floatL red">AAAAAAAA</div><div class="floatL red">AAAAAAAA</div><div class="floatL red">AAAAAAAA</div><div class="floatR blue">BBBBBBBBBB</div><div class="floatR blue">BBBBBBBBBB</div></div>float对自身元素的影响float对象将被视作块对象(block-level)，即display属性等于block。

float对子元素的影响/*这里我们去掉#wrapper的固定宽度,并在其外部增加一个固定宽度的div,以便更好地展示*/<div class="container"><div id="wrapper"><div class="floatL red">AAAAAAAA</div><div class="floatL red">AAAAAAAA</div></div></div><div class="container"><div id="wrapper"style="float:left;"><div class="floatL red">AAAAAAAA</div><div class="floatL red">AAAAAAAA</div></div></div>.block{width:250px;height:50px;border:1pxsolid#000;background:#CCC;}<div class="container"><div id="wrapper"style="float:left;"><div class="floatL red">AAAAAAAA</div><div class="floatL red">AAAAAAAA</div><div class="block"></div></div></div>.block{ width:150px;height:150px;border:1px solid #000;background:#CCC;}float对父元素之外的元素的影响0.父元素之外的非浮动元素从上面可知，当一个元素浮动时，在没有清楚浮动的情况下，它无法撑开其父元素，也就是父元素的宽高都为0。

并且其父元素之外的非浮动元素也会无视该浮动元素，浮动元素仿佛到了另外一个世界里。

.outer{height:150px;width:350px;border:1pxsolidblue;}<div id="wrapper"><div class="floatL red">AAAAAAAA</div></div><div class="outer"></div>1.父元素之外的浮动元素当浮动元素的父元素之外的元素为浮动元素时，他们仿佛去到了同一个世界里。

两个元素的浮动方向相同时：<div id="wrapper"><div class="floatL red">AAAAAAAA</div></div><div class="outer"style="float:left;"></div>两个元素的浮动方向相反时：/*CSS,这里我们在他们外面增加一个固定宽高的div以便展示，否则右浮动的元素会浮动到body的右边界*/.container{width:650px;height:250px;border:1pxsolid#000;}<div class="container"><div id="wrapper"><div class="floatL red">AAAAAAAA</div></div><div class="outer"style="float:right;"></div></div><div class="container"><div id="wrapper"><div class="floatL red">AAAAAAAA</div><div class="floatL red">AAAAAAAA</div><div class="floatL red">AAAAAAAA</div><div class="floatL red">AAAAAAAA</div></div><div class="outer"style="float:right;"></div></div>总结实际上关于float在页面中带来的影响还有许多，只是它们存在于各种特定的场景，无法一一列举，本文也并非想要穷举所有的情况，只是希望同学们能通过本文而来了解float是什么，以及它对文档所造成的破坏。