相关疑难解决方法(0)

我尝试在另一个div内的div上添加边距值.一切正常,除了最高值,它似乎被忽略了.但为什么？

我的期望:

我得到了什么:

码:

#outer {
    	width: 500px; 
    	height: 200px; 
    	background: #FFCCCC;
    	margin: 50px auto 0 auto;
    	display: block;
}
#inner {
    	background: #FFCC33;
    	margin: 50px 50px 50px 50px;
    	padding: 10px;
    	display: block;
}

<div id="outer">
  <div id="inner">
  	Hello world!
  </div>
</div>

W3Schools没有解释为什么保证金的行为方式.

我已经习惯了通过使用来清理我的花车,<br style="clear:both"/>但是东西一直在变化,我不确定这是不是最好的做法.

有一个CSS hack(来自positioneverything)可以让你在没有清除div的情况下实现相同的结果.但是......他们声称黑客有点过时了,相反你也许应该看看这个黑客.但是...阅读了700页的评论后:)似乎可能有一些地方后者黑客不起作用.

我想避免任何javascript hacks因为我希望我的清除工作,无论启用javascript.

以浏览器独立方式清除div的当前最佳实践是什么？

这个小提琴最好用以下HTML 解释这个问题:

<div class="outer">
    <div class="inner-left"></div>
    <div class="inner-right"></div>
</div>

CSS:

.outer {
    width: 100px;
    border: solid 5px #000;
}
.inner-left {
    float: left;
    height: 200px;
    width: 50px;
    background: #f00;
}
.inner-right {
    float: right;
    height: 200px;
    width: 50px;
    background: #0f0;
}

基本上,我想知道为什么overflow: hidden导致外部元素在高度上增长,包含两个浮动元素？

内联块和表格单元有什么区别？

我发现这两种风格是一样的.无论你的风格如何.text-align: center; vertical-align: middle;通过识别display: inline-block;或display: table-cell;将工作相同.

请通知主要差异.