<!DOCTYPE html> <html> <!--让--> <head> <meta charset="UTF-8"> <title></title> <style> #div0 { border: 1px solid red; width: 500px; /*height: 500px;*/ overflow: hidden; } #div1, #div2 { border: 1px solid red; width: 150px; height: 150px; float: left; margin: 10px; } #div3 { border: 2px solid blue; width: 150px; height: 200px; margin: 10px; clear: both; } /*清除浮动*/ a:after{ content:""; } </style> </head> <body> <!--1、div具有display属性,可以设置为inline,变为行级元素进行 并排展示,但是变为行级元素之后,会失去宽度和高度,因此无法实现并排的效果。 ---------采用浮动的方式则可以实现------------- 1、浮动的框可以向左或者向右移动,直到他的外边缘碰到包含框或 另外一个浮动的边框为止。由于浮动框不在文档的普通流中,所以 文档的普通流中的块框表现的就像浮动框不存在一样。 2、“由于浮动框不在文档的普通流中,所以 文档的普通流中的块框 表现的就像浮动框不存在一样。”--补充一点,文字流是能看到 浮动框,它受浮动框的影响而变更自己的位置。 3、设置clear属性使标准流中的其他盒子不受之前盒子的浮动影响 4、如果父级盒子中的所有盒子都采用浮动形式,同时父级盒子未设置 高度,那么父级盒子的高度变为0。 解决办法有2个: 1、是增加一个空的标准流的盒子。例如<div style="clear: both;"></div> 2、为父级盒子增加一个属性overflow:hidden; --> <div id="div0"> <div id="div1">div1元素</div> <div id="div2">div2元素</div> <div id="div3">div3元素</div> </div> </body> </html>
0基础入门,写的第一个浮动元素代码
最新推荐文章于 2022-10-12 22:06:20 发布