|
|
@@ -0,0 +1,69 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+ <head>
|
|
|
+ <meta charset="UTF-8" />
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
+ <title>Document</title>
|
|
|
+ <style>
|
|
|
+ /* .main {
|
|
|
+ overflow: auto;
|
|
|
+ } */
|
|
|
+ #box1 {
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ float: left;
|
|
|
+ background-color: aqua;
|
|
|
+ }
|
|
|
+ #box2 {
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ float: left;
|
|
|
+ background-color: rgb(106, 0, 255);
|
|
|
+ }
|
|
|
+ #box3 {
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ float: left;
|
|
|
+ background-color: rgb(255, 111, 0);
|
|
|
+ }
|
|
|
+ #box4 {
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ float: left;
|
|
|
+ background-color: rgb(255, 0, 98);
|
|
|
+ }
|
|
|
+ /* #box5 {
|
|
|
+ clear: both;
|
|
|
+ } */
|
|
|
+ .clearfix::after {
|
|
|
+ content: "";
|
|
|
+ display: block;
|
|
|
+ clear: both;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <!--
|
|
|
+ 浮动会导致父元素高度塌陷
|
|
|
+ 清除浮动办法：
|
|
|
+ 1.溢出隐藏法
|
|
|
+ 在父元素上添加overflow:hidden/auto
|
|
|
+ 2.额外标签法：
|
|
|
+ 在使用浮动的子集同级添加一个空标签 并给标签添加clear:both/left/right 属性
|
|
|
+ 3.伪元素清浮动
|
|
|
+ 在style中添加 .clearfix::after {
|
|
|
+ content: "";
|
|
|
+ display: block;
|
|
|
+ clear: both;
|
|
|
+ }
|
|
|
+ 将clearfix添加到高度塌陷的父元素上
|
|
|
+ -->
|
|
|
+ <div class="main clearfix">
|
|
|
+ <div id="box1">1</div>
|
|
|
+ <div id="box2">2</div>
|
|
|
+ <div id="box3">3</div>
|
|
|
+ <div id="box4">4</div>
|
|
|
+ <!-- <div id="box5"></div> -->
|
|
|
+ </div>
|
|
|
+ </body>
|
|
|
+</html>
|
e