Css 响应性网页设计：页面的流动。
我一直在学习CSS和响应式网页设计部分的教程，作者写了一些我无法理解的东西。准则中本节的目的是什么：Css 响应性网页设计：页面的流动。,css,responsive-design,Css,Responsive Design,我一直在学习CSS和响应式网页设计部分的教程，作者写了一些我无法理解的东西。准则中本节的目的是什么： .row:after { content: ""; clear: both; display: block; } 作者说：“行中的列都向左浮动，因此从页面流中删除，其他元素将被放置，就好像列不存在一样。为了防止这种情况，我们将添加一种清除流的样式。” 我不确定上述风格是如何实现这一点的。下面是完整的代码 <!DOCTYPE html> <html>
.row:after {
content: "";
clear: both;
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.row:after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color :#33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
}
</style>
</head>
<body>
<div class="header">
<h1>Chania</h1>
</div>
<div class="row">
<div class="col-3 menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="col-9">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<p>Resize the browser window to see how the content respond to the resizing. </p>
</div>
</div>
</body>
</html>
* {
框大小：边框框；
}
.罗：之后{
内容：“；
明确：两者皆有；
显示：块；
}
[类别*=“列-”]{
浮动：左；
填充：15px；
}
.col-1{宽度：8.33%；}
.col-2{宽度：16.66%；}
.col-3{宽度：25%；}
.col-4{宽度：33.33%；}
.col-5{宽度：41.66%；}
.col-6{宽度：50%；}
.col-7{宽度：58.33%；}
.col-8{宽度：66.66%；}
.col-9{宽度：75%；}
.col-10{宽度：83.33%；}
.col-11{宽度：91.66%；}
.col-12{宽度：100%；}
html{
字体系列：“Lucida Sans”，无衬线；
}
.标题{
背景色：#9933cc；
颜色：#ffffff；
填充：15px；
}
.菜单ul{
列表样式类型：无；
保证金：0；
填充：0；
}
李先生{
填充：8px；
边缘底部：7px；
背景色：#33b5e5；
颜色：#ffffff；
盒影：0 1px 3px rgba（0,0,0,0.12），0 1px 2px rgba（0,0,0,0.24）；
}
.菜单李：悬停{
背景色：#0099cc；
}
夏尼亚
- 航班
- 城市
- 岛
- 食物
城市
查尼亚是克里特岛上查尼亚地区的首府。这个城市可以分为两部分，老城区和现代城市
调整浏览器窗口的大小，以查看内容如何响应调整大小
我已经读过这个网站上的问题了，但一切似乎都不清楚 它被称为CSS Clearfix。当浮动元素时，它们不再有宽度（使它们浮动），因此它们后面的元素会向上推 所以有人发明了“clearfix黑客”，强迫元素清除。 Chris Coyier在CSS-TRICKS中有一篇非常好的文章： 如果你真的想做RWD（响应式网页设计）并成为一名网页设计师，这是你必须学习的基础之一 作者正在使用 清除修复是一种旨在阻止浮动元素导致父元素崩溃（如果所有子元素都浮动）的黑客攻击。从技术上讲，float不是布局属性，而是让文本围绕它们流动，就像您可能看到的那样。但是，它在css中用作布局属性，因为它适用于任何元素，并且开发人员都是独创的 我们将讨论您引用的特定clear fix hack，并使用
“从文档流中删除”表示在计算父元素尺寸（除其他外）时不考虑元素。当您说“它们不再具有宽度（使其浮动），因此之后的元素向上推”时，您的意思是什么所有响应性设计是否意味着使用浮点数，或者内联块显示是否是可行的替代方案？也就是说，浮动元素仍然有一个宽度，它们只是从通常的流中去掉。在计算父元素的高度时，它们不再有一个被考虑的高度-这反过来会导致父元素崩溃，如果所有子元素都被浮动，准确地说，我们通常使用浮动强制宽度，这就是为什么你用粗体字格式化整个答案的原因？请不要再这样做了。