正常流量(正常流量)很多人把这个词翻译成文档流，直译可以是普通流，也可以是标准流。我们前面说过，网页布局的核心是用CSS来放置框的位置。如何把盒子放在正确的位置
正常流量(正常流量)
很多人把这个词翻译成文档流，直译可以是普通流，也可以是标准流。
我们前面说过，网页布局的核心是用CSS来放置框的位置。如何把盒子放在正确的位置？
CSS有三种定位机制:普通流(标准流)、浮动和定位。
html中另一个非常重要的概念——标准流！或者正常流。普通流实际上是指一个网页中的标签元素按照从上到下、从左到右的顺序正常排列。比如块级元素会独占一行，行内元素会按顺序来回排列；按照这个大前提的布局，绝对没有例外，这叫正常流程布局。
浮动(浮动)
浮动最初用于控制图片，以便其他元素(尤其是文字)可以“包围”图片。
后来我们发现了一个关于浮动的很有意思的事情:就是任何一个盒子都可以排成一排，于是我们慢慢偏离主题，用浮动的特点来布局。(CSS3一直是我们真正的网页布局)
什么是漂浮？
元素的浮动是指设置了浮动属性的元素将脱离标准正常流程的控制，移动到其父元素中指定位置的过程。
在CSS中，float由float属性定义，其基本语法格式如下:
选择器{float:属性值;}
选择器{float:属性值；}
浮动的详细内部特征
飘离标准流，不占位置，会影响标准流。只能左右浮动。
浮动首先创建包含块的概念（包裹）。就是说， 浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。
浮动首先创建包含块的概念(包)。也就是说，浮动元素总是与其最近的父元素对齐。但不会超出内边距的范围。
浮动元素排列位置与最后一个元素(块级)相关。如果前一个元素是浮动的，A元素的顶部将与前一个元素的顶部对齐；如果前一个元素是标准流，则A元素的顶部将与前一个元素的底部对齐。
由此可以推断，如果一个父盒子中的一个子盒子是浮动的，那么其他所有的子盒子都需要浮动。以便它可以成行显示。添加一个浮动后，元素将具有内联块元素的特征。元素的大小完全取决于定义的大小或默认的内容浮动。根据元素的书写位置显示相应的浮动。汇总:浮动-->:
浮动的目的是使多个块级元素出现在同一行上。
浮动排水管
浮动:浮动的元素框是浮动的，浮动在其他标准流框的顶部。
漏:加了浮箱，不占位置。它是浮动的，它的原始位置被泄漏到标准流盒。
特别说明:首先，浮动框需要和标准流的父级一起使用。其次，特别注意浮动可以使元素显示方式体现内联块的特点。
版心和布局流程
看报纸的时候很容易发现，虽然报纸的内容很多，但是经过合理的排版，版面依然清晰易读。同样，在制作网页时，为了使网页清晰有条理，需要对网页进行“排版”。
“版本中心”(可视区域)是指网页主要内容所在的区域。通常，它在浏览器窗口中水平居中显示。常见的宽度值有960px、980px、1000px、1200px等。
布局
为了提高网页制作的效率，布局时通常需要遵循一定的布局程序，如下:
1.确定页面的中心(可视区域)。
2.分析页面中的行模块和每个行模块中的列模块。
3.制作HTML结构。
4.初始化CSS，然后利用盒子模型的原理，通过DIV+CSS布局来控制网页的各个模块。
一列固定宽度并居中。
清除浮动
生活就像坐北京地铁1号线:
通过国际贸易，羡慕繁荣；
路过天安门广场，想象权力；
路过金融街，梦想发财；
公主坟后，想起华丽的家族；
过了玉泉路，还是雄心勃勃…
这时，一个声音飘进我的耳朵:乘客您好，八宝山快到了！
猛然醒悟:人生苦短，有始有终。
就像我们的浮生，有浮生的开始，就应该有浮生的结束。
为什么要清除浮动？
前面说了，浮动的性质是用来混合排列一些字符的，但是当我们用来布局的时候，就会出现很多问题。但是，你不能说飘就不好。
。
由于浮动元素不再占据原始文档流的位置，它将影响后续元素的布局。要解决这些问题，就必须清除此时漂浮在这个元素中的东西。
准确的说，不是清除浮动，而是清除浮动后的影响。
如果漂浮从一开始就是一个美丽的错误，请用正确的方法去挽回。
清浮精
Clear floating主要是解决由于子元素的浮动导致父元素内部高度为0的问题。
清除浮动方法
其实本质上还是叫封闭浮动比较好。记住，清除浮动就是把浮动框圈在里面，让父框关闭出口和入口，防止它们出来影响其他元素。
在CSS中，clear属性用于清除浮动，其基本语法格式如下:
选择器{clear:属性值;}
选择器{clear:属性值；}
额外标签法
W3C建议在浮动元素的末尾添加一个标签空，比如
缺点:增加了很多无意义的标签，结构性差。我只能说我不接受你推荐的w3c方法。你不配。。。
父添加溢出属性方法
通过触发BFC，可以消除浮动效应。(稍后在BFC解释)
可以添加:溢出隐藏|自动|滚动到父级。优点:代码简洁
缺点:当内容增加时，容易造成内容不会自动换行，这样内容会被隐藏，需要溢出的元素无法显示。
在伪元素后使用以清除浮点。
:after是空元素的升级版，优点是不需要单独标记。
用法:
。clearfix:在{内容:" "之后。；显示:块；高度:0；明确:两者都有；可见性:隐藏；} .clear fix { * zoom:1；} /* IE6，7专有*/优点:符合封闭浮动思想结构，语义正确。
缺点:因为IE6-7不支持:after，所以使用zoom:1触发hasLayout。
代表网站:百度、淘宝、网易等。
注意:尽量跟内容中的一个点:“”，或者别的，而且尽量不要空，否则firefox 7.0之前的版本会有生成的空网格。
通过在前后使用双虚拟元素来清除浮动。
用法:
。clearfix:之前，。clearfix:在{内容:“”之后；显示:表格；/*这句话可以启动BFC BFC可以清除浮动，BFC我们稍后再谈*/}。clear fix:after { clear:both；}.clear fix { * zoom:1；}优点:代码更简洁
缺点:因为IE6-7不支持:after，所以使用zoom:1触发hasLayout。
代表网站:小米、腾讯等
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。
作者：美站资讯，如若转载，请注明出处：https://www.meizw.com/n/134277.html
相关推荐
-
直行车道可以左转吗(左转车道直行如何处罚)
在大城市里，有数不清的交通标志。曾经在驾校第一科学过交通法规，一到大城市，就觉得明显不够用。前几天开车去别的城市旅游。我进入闹市区后，一直跟着各种交通标志走。可
-
金榜题名近义词(与金榜题名同义的成语)
#2022高考季#今朝勤学苦，明日跃龙门今天好好学习，明天跃上龙门。做状元，意为科举得第一，与金榜题名同义。该词出自五代王的《唐嫣》第三卷:《和赋·太和九年》；
-
洋水仙图片(洋水仙种球图片)
冬天不养一盆水仙花，花儿怕你春天后悔。如果你现在种植它们，它们将在明年春天开花。所以水仙花也被称为“早春之花”，一直有“家中有水仙花，年年有余”的说法。水仙花大
-
绿城物业怎么样(绿城保安为啥工资高)
【/br/】今年5月，在浦屿，绿城物业为业主家庭准备了一场温馨的母亲节活动，以爱的名义向亲爱的告白。出于对她的贡献的感激，她将爱融入了美丽的花束中。5月母亲节，
-
文字排版工具(免费的公众号排版工具)
好的排版会提高粉丝的阅读欲望，美化图文的视觉享受，形成个人专属风格。哪个是最好的编辑器？以下都是排版行业可用的好工具，可以做出很多漂亮的页面效果。帮你快速做出好
-
带四点底的字(下面是四点底的字有哪些)
谢老师，高级教师，曾获《小学语文教学与教学质量》一等奖，市级科研项目一等奖写作，教学竞赛一等奖，四川省散文学会会员，专注小学语文教学。掌握了以下几个知识点，二年
-
商标生成器(商标设计)
一个好的设计APP，对一个设计师来说真的很有帮助。有时候发现一个不错的APP，在手机上找，才发现只适用于安卓，不适用于iPhone。这时候，我已经有心换手机了。
-
求关于妹控的小说(求一本重生带系统的妹控小说)
古言伪兄妹文系列：1.《异界芬芳》作者:疯癫中添疯癫(聪明能干的小表妹vs自大腹黑的大表妹，真假女儿，假兄妹，打脸真甜，老话甜)2.《宠物兄弟》作者:木提·黄煌
-
历史文化遗产有哪些(中国世界八大遗产)
中国有40项世界文化遗产。你去过几个？1长城2明清皇宫3敦煌莫高窟4秦始皇陵和兵马俑坑5周口店北京人遗址拉萨布达拉宫的6处历史建筑7承德避暑山庄及其周围的寺庙8
-
成都东部新区(成都东部新区地图)
5月6日，记者从四川省发改委官网获悉，《成都市东部新区总体规划》(以下简称规划)正式发布。根据规划，成都东部新区规划范围包括简阳市所辖13个镇(街道)的行政区域