BFC

johanazhu · Sep 10, 2024 · 961b4e3 · 961b4e3
1 parent 3e575ba
commit 961b4e3
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 36 deletions.
diff --git a/BFC/margin合并.html b/BFC/margin合并.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>margin合并</title>
+</head>
+<style>
+    *{
+    	margin: 0;
+    	padding: 0;
+    }
+   .one{
+        background-color: hsl(346.8 77.2% 49.8%);
+        height: 20px;
+        margin-bottom: 100px;
+        overflow: hidden;
+    }
+    .two{
+        background-color: hsl(262.1 83.3% 57.8%);
+        height: 20px;
+        margin-top: 100px;
+    }
+   /* .wrap {
+        overflow: hidden;
+    }*/
+</style>
+<body>
+    <div>解决方法：解开注释</div>
+    <div class="one"></div>
+    <!-- <div class="wrap"></div> -->
+    <div class="two"></div>     
+</body>
+</html>
diff --git a/BFC/margin塌陷.html b/BFC/margin塌陷.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>margin塌陷</title>
+</head>
+<style>
+    *{
+    	margin: 0;
+    	padding: 0;
+    }
+    .father{
+        width: 200px;
+        height: 200px;
+        background-color: hsl(0 72.2% 50.6%);
+        margin-top: 100px;
+        /* overflow: hidden;*/
+    }
+    .son{
+        width: 100px;
+        height: 100px;
+        background-color: hsl(221.2 83.2% 53.3%);
+        margin-top: 150px;
+    }
+</style>
+<body>
+    <div>解决方法：解开注释</div>
+    <div class="father">
+        <div class="son"></div>
+    </div>
+</body>
+</html>
diff --git a/BFC.html → BFC/自适应布局.html b/BFC.html → BFC/自适应布局.html
@@ -1,35 +1,35 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>BFC</title>
-</head>
-<style>
-    *{
-	margin: 0;
-	padding: 0;
-}
-.box {
-	width:200px;
-	border: 1px solid #000;
-}
-.zhanan {
-	width: 50px;
-	height: 50px;
-	background: yellow;
-    float: left;
-}
-.info {
-	background: #f1f1f1;
-    color: #222;
-    overflow: hidden;
-}
-</style>
-<body>
-    <div class="box">
-        <div class="zhanan">渣男</div>
-        <p class="info">资产100000000，上海三套房，劳斯莱斯两辆，上市公司CEO,肖战相貌，彭于晏身材，只爱你一个人...</p>
-    </div>
-</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>BFC</title>
+</head>
+<style>
+    *{
+	margin: 0;
+	padding: 0;
+}
+.box {
+	width:200px;
+	border: 1px solid #000;
+}
+.zhanan {
+	width: 50px;
+	height: 50px;
+	background: yellow;
+    float: left;
+}
+.info {
+	background: #f1f1f1;
+    color: #222;
+    overflow: hidden;
+}
+</style>
+<body>
+    <div class="box">
+        <div class="zhanan">渣男</div>
+        <p class="info">资产100000000，上海三套房，劳斯莱斯两辆，上市公司CEO,肖战相貌，彭于晏身材，只爱你一个人...</p>
+    </div>
+</body>
 </html>
diff --git a/README.md b/README.md
@@ -11,7 +11,9 @@
 - [圣杯布局](https://demo.azhubaby.com/圣杯布局与双飞翼布局/圣杯布局/index.html)
 - [双飞翼布局](https://demo.azhubaby.com/圣杯布局与双飞翼布局/双飞翼布局/index.html)
 - [三角形](https://demo.azhubaby.com/三角形.html)
-- [BFC](https://demo.azhubaby.com/BFC.html)
+- [BFC——margin塌陷](https://demo.azhubaby.com/BFC/margin塌陷.html)
+- [BFC——margin合并](https://demo.azhubaby.com/BFC/margin合并.html)
+- [BFC——自适应布局](https://demo.azhubaby.com/BFC/自适应布局.html)
 
 ## 📌 自适应方案
 

diff --git a/index.html b/index.html
@@ -52,7 +52,13 @@ <h2>📌CSS</h2>
         <a href="./三角形.html">三角形</a>
       </li>
       <li>
-        <a href="./BFC.html">BFC</a>
+        <a href="./BFC/margin塌陷.html">BFC——margin塌陷</a>
+      </li>
+       <li>
+        <a href="./BFC/margin合并.html">BFC——margin合并</a>
+      </li>
+       <li>
+        <a href="./BFC/自适应布局.html">BFC——自适应布局</a>
       </li>
     </ul>
     <h2>📌自适应方案</h2>