如果没有CSS修复,为什么我的盒子边框不包围它们内部的浮动？(修复如何工作？)
Con*_*ean 6 html css css-float
我正在自学CSS和HTML,而且我遇到了一些看似错误的东西 - 这对我如何理解HTML和CSS很有挑战性.我已经找到了解决这个bug的方法,但是我希望有人可以告诉我修复工作的原因,以及是否有一些建议可以更容易地处理CSS的不一致性.下面我详细介绍了问题及其解决方案.
问题:我有一些项目要嵌套在页面上的几个框中.我已经改变了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>元素为目标,但它也使用:after 伪元素.结果是,就像有一个虚构的元素,之后<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:after"元素"在<header>具有clear:bothCSS属性之后添加:
/* our Global CSS file */
header:after {
clear:both; /* This property clears floating elements! */
content:".";
display:block;
height:0;
visibility:hidden;
}
那怎么clear办？根据w3c ...
此属性指示元素框的哪些边可能不与较早的浮动框相邻.
不太可靠但有时更清晰的w3schools描述clear为......
clear属性指定元素的哪一侧不允许其他浮动元素.
由于header:after"元素"具有clear:bothCSS属性,因此将在其左侧或右侧的任何浮动元素的底部(之后)显示,例如红色和绿色框.
现在,resettemp.css文件似乎几乎每个元素想象用同样的伎俩目标-种地毯式轰炸的方法来解决的float- overflow问题.更好的想法是学习CSS:P
您也可以使用header { overflow:hidden; }- 根据您的需要.