CSS浮动怪异的行为

问题描述

我有这个奇怪的行为与浮动定位元素。父元素的宽度为100％，高度为450px。子浮动元素具有百分比宽度和高。当我改变窗口的宽度，一些子元素在高度上有细微的变化。

你可以在这个小提琴测试：

尝试减少窗口，你会看到紫色div的行为怪异...在我的情况下（Safari和Chrome），它开始改变高度，然后跳到右边。我想这是因为黄色框变得稍小了，为什么？

HTML

 < div class =metro> 
< div class =topleft> a< / div> 
< div class =topright> b< / div> 
< div class =middle> c< / div> 
< div class =bottomleft> d< / div> 
< / div> 
  

CSS

  .metro {
 height：550px; 
} 
 .metro div {
 float：left; 
} 
 .metro .topleft {
 background：red; 
 width：33％; 
 height：67％; 
 margin-right：1％; 
} 
 .metro .topright {
 background：green; 
 width：66％; 
 height：33％; 
 margin-bottom：1％; 
} 
 .metro .middle {
 width：32％; 
 height：33％; 
 background：yellow; 
} 
 .metro .bottomright {
 background：blue; 
 width：33％; 
 height：67％; 
 margin-left：1％; 
 top：-32.5％; 
 position：relative; 
} 
 .metro .bottomleft {
 background：purple; 
 width：66％; 
 height：33％; 
 margin-top：1％;非常感谢你
 
 
 
 
 h2_lin>解决方案
添加 clear：left; 到 .metro .bottomleft  
 
 
 
 //正确fiddle 
 
 
 
  
 
 
 
  
 
I have this weird behavior with float positioned elements. The parent element is 100% width, and 450px height. Child floated elements have percentage width and high. When I change the width of the window, some child element have minor changes in height.

You can test it in this fiddle : http://jsfiddle.net/matthieubrunet/jsfww2e6/1/

Try to reduce the window, and you will see the purple div act weird... In my case (Safari and Chrome), it start changing height, and then jump to the right. I suppose it's because the yellow box became slightly smaller, but why ?

HTML
<div class="metro">
    <div class="topleft">a</div>
    <div class="topright">b</div>
    <div class="middle">c</div>
    <div class="bottomleft">d</div>
</div>
CSS
    .metro {
    height: 550px;
}
.metro div {
    float: left;
}
.metro .topleft {
    background: red;
    width: 33%;
    height: 67%;
    margin-right: 1%;
}
.metro .topright {
    background: green;
    width: 66%;
    height: 33%;
    margin-bottom: 1%;
}
.metro .middle {
    width: 32%;
    height: 33%;
    background: yellow;
}
.metro .bottomright {
    background: blue;
    width: 33%;
    height: 67%;
    margin-left: 1%;
    top:  -32.5%;
    position: relative;
}
.metro .bottomleft {
    background: purple;
    width: 66%;
    height: 33%;
    margin-top: 1%;
}
Thank you very much
 解决方案 
add clear: left; to .metro .bottomleft
//correct fiddle
http://jsfiddle.net/Lvk3k6gn/
http://www.w3schools.com/cssref/pr_class_clear.asp
                        
这篇关于CSS浮动怪异的行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！