问题：
我有一些项目,我想嵌套在页面上的几个框中.我已经改变了CSS以引起注意特定的问题区域：红色和绿色框应该夹在黑色和黄色线之间.
红色和绿色框设置为浮动到页面的右侧和左侧.它们的容器不会膨胀以包围它们,并且黑色和黄色线条相互接触.在我的自定义CSS之前应用魔法CSS之后,两条线按预期包围红色/绿色框
这是我的文件：
template.html
<html>
<head>
<!-- uncomment the line below to enable the fix -->
<!--<link rel="stylesheet" href="css/resettemp.css" type="text/css" > -->
<link rel="stylesheet" href="css/template.css" type="text/css" >
</head>
<body>
<section class="content">
<header id="contact">
<div id="name">Name</div>
<div id="address">
<div>Home Address</div>
</div>
<div id="contact-details">
<div><strong>Phone Number:</strong>5555 </div>
</div>
</header>
This text should be under everything else.
</section>
</body>
</html>
template.css：
header#contact
{
display: block;
font-size: 1em;
border-bottom: 5px #ff0 dashed;
}
header#contact
#name
{
display:block;
text-align: right;
font-size: 2em;
border-bottom: 3px #000 solid;
}
header#contact
#address
{
float:left;
background: #f00;
}
header#contact
#contact-details
{
float:right;
background: #0f0;
}
以下修复程序放在“resettemp.css”中：
/* our Global CSS file */article:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }aside:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }div:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }footer:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }form:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }header:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }nav:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }section:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }ul:after { clear:both; content:"."; display:block; height:0; visibility:hidden; }/* our ie CSS file */article { zoom:1; }aside { zoom:1; }div { zoom:1; }footer { zoom:1; }form { zoom:1; }header { zoom:1; }nav { zoom:1; }section { zoom:1; }ul { zoom:1; }
来源：http://www.sycha.com/css-clearfix-floated-element-automatically-fill-parent-container
然后是上面的CSS：http://www.marcwatts.com.au/blog/best-clearfix-ever/
我如何理解这个CSS修复的工作原理？
除了理解这些特性之外,我如何自学CSS的基本语法？
看起来我可能正在使用浮动来不正确地完成格式化目标 – 在另一个块元素下面的容器的相对两侧获取两个文本框的更可接受的方式是什么？
浏览器：谷歌浏览器10.0.648.205
解决方法
这是一个图表,从w3c开始,显示当浮动重叠正常流中元素的边界时会发生什么.
浮动元素的这种行为导致其父元素的高度做大多数开发人员认为不直观的事情.
但鉴于它在w3c上有记录,这是故意的：它不是一个bug.
你找到的解决方案
所以这是CSS中有趣的规则：
/* our Global CSS file */
header:after {
clear:both;
content:".";
display:block;
height:0;
visibility:hidden;
}
此规则定位于< header>元素,但它也使用：pseudo-element之后.结果就是它在< header>之后有一个虚构的元素.您使用此CSS规则进行定位：
<!DOCTYPE html>
<html>
<head>
<!-- uncomment the line below to enable the fix -->
<!--<link rel="stylesheet" href="css/resettemp.css" type="text/css" > -->
<link rel="stylesheet" href="css/template.css" type="text/css" >
<title>Teaching myself CSS,HTML. I want help understanding this bug.</title>
</head>
<body>
<section class="content">
<header id="contact">
<div id="name">Name</div>
<div id="address">
<div>Home Address</div>
</div>
<div id="contact-details">
<div><strong>Phone Number:</strong>5555 </div>
</div>
</header><!-- imaginary header:after element -->
This text should be under everything else.
</section>
</body>
</html>
这个虚构的标题：在< header>之后添加的“element”之后有一个明确的：两个CSS属性：
/* our Global CSS file */
header:after {
clear:both; /* This property clears floating elements! */
content:".";
display:block;
height:0;
visibility:hidden;
}
那清楚的是什么呢？根据w3c …
This property indicates which sides of an element’s Box(es) may not be adjacent to an earlier floating Box.
不太可靠但有时更清晰的w3schools描述清楚……
The clear property specifies which sides of an element where other floating elements are not allowed.
由于标题：在“元素”之后有一个明确的：两个CSS属性,它将出现在左侧或右侧的任何浮动元素的底部(之后),例如您的红色和绿色框.
现在,resettemp.css文件似乎几乎针对可以想象的每个元素使用相同的技巧 – 一种解决浮动溢出问题的地毯炸弹方法.更好的想法是学习CSS：P
你也可以使用标题{overflow：hidden; } – 取决于您的需求.
