HTML——float浮动布局
程序员文章站
2022-04-24 22:35:13
...
-
float浮动布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div{ width: 200px; height: 200px; /* 流式布局中 是块级标签 独占一行 */ } .div1{ background-color: palegoldenrod; } .div2{ background-color: palevioletred; /* 将 div2设置为浮动布局 --- 将其z轴发生变化 div2 在xy平面系中的位置上就没有了 上升了一个维度 div3 上方的位置因此就空出来了， 流式布局中 这个位置没有标签占用 下方的标签就会向上方移动 */ /* 从左向右浮动 也就是如果有多个标签的话 会从左向右布局 */ float: left; } .div3{ background-color: plum; } </style> </head> <body> <!-- 既有流式布局 又有浮动布局 --> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> </body> </html><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div{ width: 200px; height: 200px; background-color: red; color: white; text-align: center; line-height: 200px; margin: 5px; } .div_float{ /* 从左向右浮动布局 left 从右向左布局 right */ float: right; } /* 现在是既要显示浮动布局的内容 又有显示流式布局的内容 浮动布局不能遮挡流式布局： 解决这个问题：让流式布局在浮动布局的下方开始布局就不会出现遮挡的情况了 怎么设置这个呢？ 样式 clear ---> 清除浮动 让标签在浮动布局的下方开始布局 */ .clear_float{ /* left: 表示在从左向右的浮动布局的下方开始布局 right: 表示在从右向左的浮动布局的下方开始布局 both: 不管什么浮动 都从其下方开始布局 */ clear: both; } </style> </head> <body> <div class="div_float">1</div> <div class="div_float">2</div> <div class="div_float">3</div> <div class="div_float">4</div> <div class="clear_float">5</div> <div>6</div> </body> </html>
上一篇： 关羽丢失荆州为何不直接退守上庸 关羽败走麦城的原因是什么
下一篇： 相对定位和绝对定位的区别