为什么浮子保持“幻影”空间，当他们逃到下一行？ [英] Why do floats keep a "phantom" space when they escape to the next line?

问题描述

我在使用CSS元素的属性，并写下这段代码：

  body {
 font-家庭：Helvetica; 
} 
 .parent {
 background-color：yellow; $ b $b overflow：auto; 
 padding-bottom：20px; 
 display：inline-block; 
} 
 .col {
 height：200px; 
 padding：20px 10px; 
 float：left; 
 margin：10px 10px; 
} 
 .red {
 background-color：red; 
} 
 .green {
 background-color：＃00ff00; 
} 
 .blue {
 background-color：＃0000ff; 
 color：white; 
} 
 p：hover {
 background-color：＃ffff00; 
} 
  

为什么是当我运行结果并调整屏幕大小其中蓝色浮动清除到下一行，父div的黄色轮廓不调整大小以适应宽度？

如果这令人困惑，我道歉。以下是我的意思的视觉示例：

https://www.dropbox.com/s/9r7mhizfqdbyflh/Screenshot%202014-12-24%2001.02.36.png?dl=0

为什么会有黄色的空间，尽管它是inline-block？是因为float会保留保留的空间，即使它被清除到下一行吗？

JSFiddle：
http://jsfiddle.net/ffxg9qq0/1/embedded/result/

谢谢！

解决方案

空格是由于 float：left $ 您需要编写 @media 查询，以便。父调整

  @media屏幕和（max-width：400px）{
。 col {
 float：none; 
} 
} 
  

max-width 400px

demo - http://jsfiddle.net/ffxg9qq0/3/

  body {font-family：Helvetica;} parent {background-color：yellow; overflow：auto; padding-bottom：20px; display：inline-block;}。col {height：200px; padding：20px 10px; margin：10px 10px; float：left;}。red {background-color：red;}。green {background-color：＃00ff00;}。 color：white;} p：hover {background-color：＃ffff00;} @ media screen和（max-width：400px）{.col {float：none; }}  

 < div class ='parent' < div class ='col green'> < p>我在一个绿色浮点！< / p> < / div> < div class =col red> < p>我在一个红色浮动按钮！< / p> < / div> < div class =col blue> < p>我在一个蓝色浮动线！< / p> < / div>< / div>  

I'm playing around with properties of CSS elements and wrote this code:

body {
    font-family: "Helvetica";
}
.parent {
    background-color: yellow;
    overflow: auto;
    padding-bottom: 20px;
    display: inline-block;
}
.col {
    height: 200px;
    padding: 20px 10px;
    float:left;
    margin: 10px 10px;
    }
.red {
    background-color: red;
}
.green {
    background-color: #00ff00;
}
.blue {
    background-color: #0000ff;
    color: white;
}
p:hover {
    background-color: #ffff00;
}

Why is it that when I run the result and resize the screen to the point where the blue float clears to the next line, the yellow outline of the parent div doesn't resize to fit the width?

I apologize if that is confusing. Here is a visual example of what I mean:

https://www.dropbox.com/s/9r7mhizfqdbyflh/Screenshot%202014-12-24%2001.02.36.png?dl=0

Why is there the yellow space left over despite it being inline-block? Is it because float keeps reserved space there even though it's cleared to the next line?

JSFiddle: http://jsfiddle.net/ffxg9qq0/1/embedded/result/

Thank you!

解决方案

the space was cause due to float:left of the children

you will need to write @media query so that the .parent adjusts

@media screen and (max-width: 400px){
    .col{
        float:none;
    }    
}

resize the below fiddle to max-width 400px

demo - http://jsfiddle.net/ffxg9qq0/3/

body {
  font-family: "Helvetica";
}
.parent {
  background-color: yellow;
  overflow: auto;
  padding-bottom: 20px;
  display: inline-block;
}
.col {
  height: 200px;
  padding: 20px 10px;
  margin: 10px 10px;
  float: left;
}
.red {
  background-color: red;
}
.green {
  background-color: #00ff00;
}
.blue {
  background-color: #0000ff;
  color: white;
}
p:hover {
  background-color: #ffff00;
}
@media screen and (max-width: 400px) {
  .col {
    float: none;
  }
}

<div class='parent'>
  <div class='col green'>
    <p>I'm in a green float!</p>
  </div>
  <div class="col red">
    <p>I'm in a red float!</p>
  </div>
  <div class="col blue">
    <p>I'm in a blue float!</p>
  </div>
</div>

这篇关于为什么浮子保持“幻影”空间，当他们逃到下一行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！