CSS Float(浮动)

白泽的笔记

已于 2022-07-26 19:26:08 修改

阅读量287

点赞数

文章标签：前端 html css

于 2022-06-27 18:55:10 首次发布

本文链接：https://blog.csdn.net/m0_51024444/article/details/125490013

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>浮动</title>
       <style type="text/css">
           .box{
               background-color: aquamarine;
               /* 元素左右浮动导致高度坍塌BUG */
               /* height: 300px; */
               overflow: auto;/* BFC */
               /* display: inline-block; */
               /* float: left; */
               /* 以上多种都可解决但overflow: auto;效果最佳 */
           }
           .box1{
               float: left;
               width: 200px;
               height: 200px;
               background-color: aqua;
               /* float: none;默认不浮动
               float: left;左浮
               float: right;右浮*/
           }
           .box2{
               float: right;
               width: 300px;
               height: 300px;
               background-color: black;
           }
           .banner{
               width: 100%;
               height: 600px;
               background-color: red;
           }
       </style>
   </head>
   <body>
       <div class="box">
       <div class="box1"></div>
       <div class="box2"></div>
       </div>
       <div class="banner"></div>
       <div></div>
       
   </body>
</html>