时间：2023-09-28 00:24:01 | 来源：网站运营
时间：2023-09-28 00:24:01 来源：网站运营
CSS网页布局 -- 标准流/浮动流：
在线咨询
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>标准流排版</title> <style> div {width: 100px; height: 100px;border: 2px solid blueviolet;} span~strong {border: 2px solid blueviolet;} </style></head><body><div class="box1">我是块级</div><hr><span class="box2">我是行内</span><hr><span class="box3">我是span</span><b>我是加粗FV4005</b><strong>我是强调FV215b(183)</strong></body></html>浮动元素脱离文档流意味着,不再区分行内、块级、行内块级，无论是什么级的元素都可以水平排版.无论是什么级的元素都可以设置宽高,综上所述，浮动流中的元素和标准流总的行内块级元素很像,当某一个元素浮动走之后，那么这个元素看上去就像被从标准流中删除了一样，这个就是浮动元素的脱标,如果前面一个元素浮动走了，而后面一个元素没有浮动，那么垂直方向的元素会自动填充，浮动元素重新归位后就会覆盖该元素,浮动流只有一种排版方式，就是水平排版，它只能设置某个元素左对齐或者右对齐，没有居中对齐，也就是没有center这个取值一旦使用了浮动流，则margin:0 auto;失效<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>浮动流排版</title> <style> .box1 {width: 100px;height: 100px;background-color: #08f820; float: left; -- 添加浮动 } .box2 {width: 150px;height: 150px;background-color: black} </style></head><body><div class="box1">我浮起来了</div><div class="box2"></div></body></html>是因为浮动元素浮动之后的位置取决于它在浮动之前的标准流中的位置，跟标准流还是有一定的关系,比如说浮动的元素在浮动之前处于标准流的第二行,那么他浮动之后也是处于浮动流的第二行,不会去找其他行的浮动元素去贴靠,打一个比方就是:浮动流就是在标准流上面覆盖的一层透明薄膜,元素浮动之后就会被从标准流中扔到浮动流这个薄膜上,他在这个薄膜上的位置还是以前在标准流的位置上找同方向的浮动元素进行贴靠贴靠的准则就是: 同一个方向上谁先浮动，谁在前面 不同方向上左浮动找左浮动，右浮动找右浮动 <style> .box1 {float: left;width: 100px;height: 100px;background-color: red;} .box2 {float: left;width: 150px;height: 150px;background-color: blue;} .box3 {float: right;width: 250px;height: 250px;background-color: yellow;} .box4 {float: right;width: 300px;height: 300px;background-color: rebeccapurple;} </style><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div><div class="box4">4</div> <style> .box1 {float: left;} -- 图片左浮 .box2 {float: right;} -- 图片右浮 </style><body><div class="box1"><img src="21a14.jpg" alt="" height="200px"></div><div class="box2"><img src="18a12.jpg" alt="" height="200px" align="right"></div><div class="box3">硝烟飘到了遥远的尽头，战场已被风沙掩埋，呐喊在空寂里沉默，古剑在残风中腐朽。为战斗而生的灵魂，开始为生存而战斗，没有号角的年代里，生存是唯一的长路。</div><div class="box4">生命短暂，犹若露珠消散，人们在奔波中探寻答案。运数仿佛大海起伏不定，掌上迷离脉纹回路漫漫。长剑在黑夜吟唱悲歌，岁月如斑驳铜镜经年。天际流火叩响大地之门，岁月星辰刻画沧桑年轮。纵横交错兮天下之局，谁能参悟兮世事如棋。</div></body>clear这个属性必须设置在块级、并且不浮动的元素中值 none : 默认值。允许两边都可以有浮动对象 left : 不允许左边有浮动对象 right : 不允许右边有浮动对象 both : 不允许左右有浮动对象重要两点 元素是从上到下、从左到右依次加载的 clear: left;对自身起作用，而不会影响其他元素 一旦左边有浮动元素，即切换到下一行来保证左边元素不是浮动的，依据这一点解决父级塌陷问题。 <style type="text/css"> * {margin: 0;padding: 0;} body {} .header {} .logo {width: 200px;height: 200px;background-color: red;float: left;} .nav {width: 200px;height: 200px;background-color: green;float: left;} .content {width: 960px;height: 200px;background-color: yellow;} .wall {clear: both;height: 20px;} </style><div class="header"> <div class="logo">logo</div> <div class="nav">nav</div></div><!--外墙--><div class="wall h20"></div><div class="content">content</div> <style type="text/css"> * {margin: 0;padding: 0;} body {} .header { /*margin-bottom: 30px;*/} .logo {width: 200px;height: 200px;background-color: red;float: left;} .nav {width: 200px;height: 200px;background-color: green;float: left;} .content {width: 960px;height: 200px;background-color: yellow; /*margin-top: 30px;*/} .wall {clear: both;height: 30px;} </style><div class="header"> <div class="logo">logo</div> <div class="nav">nav</div> <!--内墙--> <div class="wall h20"></div></div><div class="content">content</div> <style type="text/css"> * {margin: 0;padding: 0;} body {} .header:after { /*必须要写这三句话*/content: '.';height: 0;display: block;clear: both;visibility: hidden;} .header { /*兼容ie6,否则伪类选择器只能在谷歌浏览器中生效，其余没用*/*zoom: 1;} .logo {width: 200px;height: 200px;background-color: red;float: left;} .nav {width: 200px;height: 200px;background-color: green;float: left;} .content {width: 960px;height: 200px;background-color: yellow;} </style><div class="header"> <div class="logo">logo</div> <div class="nav">nav</div></div><div class="content">content</div>关键词：浮动,标准,布局
