CSS：浮动div有0高度
我试图在另一个div中并排放置2个div，这样我可以有2列文本，外部div在两个边框之间绘制边框：
HTML
<div id="outer"> <div id="left"> ... <div id="right"> </div> CSS
#outer{ background-color:rgba(255,255,255,.5); width:800px; } #left{ float:left; } #right{ width:500px; float:right; }
但是，外部div注册的高度为0px，因此边框不会绕过其他div。 如何让外部的div认识到它里面的东西的高度？
这不是因为浮动div没有高度，这是因为浮动div不会影响父元素的大小。
您可以使用overflow风格使父元素考虑浮动元素：
#outer { overflow: auto; }
这个问题有几个解决scheme：
#outer: overflow: hidden;
或者添加一些非显示内容到浮动的div之后的外部div，然后添加一个清除：两个样式规则。
你也可以通过css来添加：after伪元素，以便在这些div之后插入内容，然后再应用clear：这两个都有 – 不需要额外标记的优点。
我的首选是第一个。
您可以通过在浮动元素之后插入一个元素来清除浮动元素，该浮动元素具有应用于其上的clear属性，因为浮动子元素会导致父元素的高度为0，因为它们没有考虑浮动子元素的高度。
<div id="outer"> <div id="left"> ... <div id="right"> <div class="clear"></div> </div> #outer{ background-color:rgba(255,255,255,.5); width:800px; } #left{ float:left; } #right{ width:500px; float:right; } .clear{ clear: both; }
尝试这个：
<div id="outer"> <div id="left"> ... <div id="right"> <div style="clear:both"></div> </div>
你还必须漂浮外部的股利。 包含floatet div并且不会自动浮动的div。
#outer{ background-color:rgba(255,255,255,.5); width:800px; float:left; } #left{ float:left; width:300px; } #right{ width:500px; float:right; }
添加溢出：隐藏; 到主要的分区。
<style type="text/css"> #outer{ background-color:rgba(255,255,255,.5); width:800px; overflow: hidden; border: 1px solid green; } #left{ float:left; border: 1px solid red; } #right{ width:500px; float:right; border: 1px solid yellow; } </style>
如何回合如此：
<style type="text/css"> #outer{ background-color:rgba(255,255,255,.5); width:800px; border:thin solid #000000; height:300px; margin:5px; padding:10px; } #left{ float:left; border:thin dashed #000000; width:385px; height:100px; margin:5px; } #right{ width:385px; float:left; border:thin dashed #000000; height:100px; margin:5px; } </style> <div id="outer"> <div id="left"> </div> ... <div id="right"> </div> </div>
如果在一个父母的div浮动它不再是父div的一部分：检查通过检查父母element.no来解决你的问题有两种方法：1）在父类的末尾做一个空的div它作为.blank所有以下CSS
.blank:after{ content: ""; clear:both; display:block; }
或2）给父母一个类.clear-fix并添加css
.clearfix:after { content: ""; clear: both; display: block;
它会给父母高度等于内容
