包含css样式规则float的词条

css中 float 是什么意思

浮动什么意思呢，比如，默认的，我们知道，div是占满一行的，现在我们想把两个div显示在一行上，那怎么办呢

10年积累的成都做网站、成都网站制作经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站策划后付款的网站建设流程，更有杜尔伯特免费网站建设让你可以放心的选择与我们合作。

div style="width:100px;"11111/divdiv style="width:150px"2222/div

这样我们就设置了两个div，一个宽度100px,一个宽150px,可预览一下，我们的div仍在两行上，那么怎么把它改到一行上呢，这儿就需要float，设置第一个div的float为left

div style="width:100px;float:left;"11111/divdiv style="width:150px"2222/div

再预览，就可以看到，它们到一行上了。

clear是什么意思呢，clear是清除的意思，它有三个值，left,right,both

很好理解，如果设置了clear:left，它就不怕它的左边有float，同理clear:right,clear:both，是左右都不让有float

举个例子，还是上面的

我们设置第二个div的clear:left,也就是不让它左边有float

div style="width:100px;float:left;"11111/divdiv style="width:150px;clear:left;"2222/div

我们预览一下，就可以看到，尽管第一个div已经float:left了，这两个div仍然在两行上，就是由于第二个div不让它左边有float

因为css的定义是后面的可以覆盖前面的，明白了吧

在CSS样式中有关 float 浮动嵌套 问题

浮动元素可以相互嵌套，嵌套规律与流动元素的嵌套相同。浮动的包含元素（父元素）总会自动调整自身的高度和宽度以实现对浮动元素的包含。

我们来看一个例子：

浏览器效果图：

这时会发现父元素会自动调整自身的大小来包含子元素。

如果包含元素定义了高度和宽度则他不会随子元素的大小而自动调整自身显示区域来适应子元素的显示。注意，在IE6及更低版本浏览器中包含框仍然能够自动调整自身大小来适应子元素的显示大小，不过在IE7版本中微软纠正了这个不符合标准的显示方法。如下

示例：

浏览器效果图：

默认状态下溢出不隐藏，我们可以添加 样式 overflow:hidden; 隐藏多余的部分或overflow: scroll; 多余部分显示滚动条。

如果把浮动元素嵌入到流动元素之内，则父元素不能够自适应子元素的高度，

如下示例：

浏览器效果图：

在上图中可以看到包含元素div并，没用显示。原因就是包含元素没有适应子元素的高度，而是根据自身定义的属性以独立的形式显示（父元素没有被撑开，仅收缩成一条直线显示）。所以，在应用混合嵌套式，要预测到浮动与流动混合布局时会出现的各种怪现象，并积极做好兼容处理。

解决方法：可以在包含元素内的最后一行添加一个清除元素，强制撑开包含元素，使其包含浮动元素。

示例如下：

浏览器效果图：

本文章参考书籍：HTML5＋CSS3＋JavaScript从入门到精通（标准版）未来科技　编著

求解CSS样式中float属性的问题?

问题补充：向 jszjgqq 和 363822803 提问 ： 清除浮动是 清除自身的浮动？ 还是 清除其它元素浮动对自己的影响？

清除其它元素浮动对自己的影响

=======================================================

问题一：一直搞不明白，既然清除了浮动（如上例子），就不应该再浮动了，即两个div应该 各自 独占一行，而事实是两个div仍然浮动在 左右两边 ？？

答: 清除浮动是清除的本身,也就是说第三个div元素不会进行浮动,而前面两个div不受任何的影响.如果说第三个元素不清除浮动的话那就会跟着上一个元素进行浮动.

问题二：“clear ：both”，两个浮动的div，是在它的上面啊？怎么会是both呢？

在div sytle="clear ：both"/div这行代码中，both指的不就是 本元素(div) 的左右

两边吗？

clear ：both 的意思是清除左右两边的浮动元素,

我建议你前面2个div 都写float:left 这样测试的时候更加好理解

如果你这么写

div id="content1"

div style="float ：left"/div

div style="float ：left"/div

div/div

/div

上面代码的第三个div你会发现紧贴着第二个div后面.

如果第三个div写style="clear:both"的话就不会浮动了,或者说clear:left 清除左浮动.

我觉得float很好的理解,你自己多写几个例子研究下就行了,不要光凭着想象去解决问题,要用实际的例子去证明你的猜测.

本文名称：包含css样式规则float的词条
路径分享：http://cdiso.cn/article/dsdigjo.html