CSS中的float

来源：互联网发布：淘宝客服外包多少提成编辑：程序博客网时间：2024/04/27 16:13

CSS中的float

首先，我们要明白float是什么？

答：float即为浮动，在CSS中的作用是使元素脱离正常的文档流

并使其移动到其父元素的“最左边”（float: left;）或“最右边”（float: right;）。

Float：

适用于：所有元素

默认值：none

继承性：no

1.float的用法

（1）. 出现在浏览器左边 float的值设置为left。

<!DOCTYPE html><html><head>   <title>float</title>   <style type="text/css">       #floatL{           width: 150px;           height: 100px;           background-color: deepskyblue;           float: left;       }   </style></head><body>   <div id="floatL">       我出现在浏览器左边   </div></body></html>

（2）.出现在浏览器右边 float的值只需改为right。

2.float的影响

在CSS中任何元素都可以浮动，浮动元素会生成一个块级框，相当于给元素设置了display:blok。

那么float究竟有哪些影响呢？下面列举一些我遇到过的问题。

(1)float会对其父元素造成影响

<style type="text/css">       #parent{           width: 600px;           padding: 30px;           border: 1px solid red;       }       #floatL{           width: 150px;           height: 100px;           background-color: deepskyblue;           float: left;       }</style> <divid="parent">    <div id="floatL">        我出现在浏览器左边    </div>       </div>

如上所示，元素在浮动之后，就脱离了正常的文档流，当然，就无法把他的父元素撑开，

就造成了父元素在他的下面。。

(2)既然对父元素造成影响，那么对他的兄弟元素呢？

<style type="text/css">       #parent{           width: 600px;           padding: 30px;           border: 1px solid red;        }       #floatL{           width: 150px;           height: 100px;           background-color: deepskyblue;           float: left;       }       #brothers{           width: 300px;           height: 200px;           background-color: olivedrab;       }</style> <divid="parent">    <div id="floatL">        我出现在浏览器左边    </div>    <div id="brothers">        兄弟元素    </div></div>

这里说明了三个问题①兄弟元素会在浮动元素之下；②兄弟元素会忽视浮动元素从而占据他的位置；③兄弟元素中的文字信息和其他的行内元素都会环绕浮动元素。

(3)如果我在兄弟元素的style属性里加上float: left; 会怎么样呢？

style type="text/css">       #parent{           width: 600px;           padding: 30px;           border: 1px solid red;        }       #floatL{           width: 150px;           height: 100px;           background-color: deepskyblue;           float: left;       }       #brothers{           width: 300px;           height: 200px;           background-color: olivedrab;           float: left;        }</style> <divid="parent">    <div id="floatL">        我出现在浏览器左边    </div>    <div id="brothers">        兄弟元素    </div></div>

我们看到了，他的兄弟元素紧跟其后，这是因为当两个元素都设置为浮动元素之后，当一个浮动元素在浮动过程中碰到另一个浮动元素，就会紧跟其后。

(4)如果我想要兄弟元素在前面，这个时候只需要把两个元素的DIV块换一下位置，id="brothers"在前面，id="floatL"在后面便可以了。

<divid="parent">    <div id="brothers">        兄弟元素    </div>     <div id="floatL">        我出现在浏览器左边    </div>

（5）我把他们的父元素的width 变小会发下这面这种情况

这是因为把元素设置为浮动之后，他无法撑开其父元素，所以只有跟在另一个浮动元素之后了。

最后，我们在使用float中会发现很多问题，但是这些都要通过自己的实践去找到问题，然后一一解决，这样才能真正认识到float的神奇。

0 0