cssfloat样式的简单介绍

CSS中float属性怎么用

这个东西叫浮动。

网站建设公司,为您提供网站建设,网站制作,网页设计及定制网站建设服务,专注于企业网站建设,高端网页制作,对玻璃钢雕塑等多个行业拥有丰富的网站建设经验的网站建设公司。专业网站设计,网站优化推广哪家好,专业seo优化排名优化,H5建站,响应式网站。

顾名思义，就是让设置的标签产生浮动效果，就是脱离原来页面的标准输出流。

正常情况下，HTML页面中块元素都是从上倒下排列的。如果想实现左右结构。

float的一种选择（当然还有其他方法）。

比如

div style="widht:500px"

div style="float:left;width:200px"左/div

div style="float:left;width:200px"右/div

/div

这样，这个两个DIV标签就在同一行上了（同时靠左），当然有个前提，就是他们俩的父元素的宽度要至少大于400px，这样才能在同一行上。这个结果是两个DIV的右侧会空出100PX的空白

div style="widht:500px"

div style="float:left;width:200px"左/div

div style="float:right;width:200px"右/div

/div

以上写法，也是在同一行。不同的是，一个靠左，一个靠右。

这里边的两个DIV的中间有100PX的空白。

需要注意的是，当标签使用了float属性后，就脱离了标准输出流，就不受页面约束了。这样不方便，也不利于页面布局。

所以，一般浮动之后要清除浮动。

div style="widht:500px"

div style="float:left;width:200px"左/div

div style="float:right;width:200px"右/div

span style="clear:both"/span

/div

这样，页面整体的布局结构就基本上没有被破坏了。

在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很好的理解,你自己多写几个例子研究下就行了,不要光凭着想象去解决问题,要用实际的例子去证明你的猜测.