IE CSS Bug系列：不正确的浮动伸缩Bug

影响的IE版本

在黔西等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供成都做网站、成都网站设计网站设计制作按需规划网站,公司网站建设,企业网站建设,成都品牌网站建设,全网营销推广,成都外贸网站建设公司,黔西网站建设费用合理。

这个 bug 影响 IE7、IE6

表现

跟随在其他浮动元素之后的浮动元素，设置clear属性时不能正确伸缩

教程编写时间

2009.8.18 21:17:12

描述

这是我在 Gérard Talbot 收集整理的 IE7 Bug 页面发现的bug之一（我大部分案例都是从那来的）。这个bug影响IE7跟IE6，表现就是设置了 clear 属性的浮动元素并不能正确地伸缩。我们来看一下：

演示

示例在这个独立页面

HTML代码：

 
 
   
  
     
  
      Here is a <div> having float: left and clear: left. As expected,   
  
      it takes, it occupies as much width it requires from the body's content   
  
      area.

This is the same type of <div>: a left-floated <div> with

clear: left. This <div> should use, should take, should occupy

the whole content area of the body node (expected results). However, in

Internet Explorer 7, this left-floated <div> with clear: left only

takes, only occupies a very narrow chunk of the body's content area

(actual results). More text filling. More text filling. More text

filling. More text filling. More text filling.

div, li {
background-color: #ddd;
border: 1px solid green;
clear: left;
color: black;
float: left;
}

Here is a <div> having float: left and clear: left. As expected,
it takes, it occupies as much width it requires from the body's content
area.
This is the same type of <div>: a left-floated <div> with
clear: left. This <div> should use, should take, should occupy
the whole content area of the body node (expected results). However, in
Internet Explorer 7, this left-floated <div> with clear: left only
takes, only occupies a very narrow chunk of the body's content area
(actual results). More text filling. More text filling. More text
filling. More text filling. More text filling.
Here, a third <div> having float: left and clear: left. Change
your browser window viewport's width.
- Here is a <div> having float: left and clear: left. As expected,
- it takes, it occupies as much width it requires from the body's content
- area.
- This is the same type of <div>: a left-floated <div> with
- clear: left. This <div> should use, should take, should occupy
- the whole content area of the body node (expected results). However, in
- Internet Explorer 7, this left-floated <div> with clear: left only
- takes, only occupies a very narrow chunk of the body's content area
- (actual results). More text filling. More text filling. More text
- filling. More text filling. More text filling.
- Here, a third <div> having float: left and clear: left. Change
- your browser window viewport's width.

div {
background-color: #ddd;
border: 1px solid green;
clear: left;
color: black;
float: left;
}
.ie_fix { display: inline-block; }
.ie_fix { display: block; }