首頁 探索 說明
登入
lovecoding
/
VIP24
6
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
瀏覽代碼

浮动塌陷

dongxiuling 2 年之前
父節點
642aed518a
當前提交
325b99e33b
共有 2 個文件被更改，包括 50 次插入 和 2 次删除
統一視圖 顯示文件統計
  1. 23 2
      css/13_清除浮动问题.html
  2. 27 0
      css/14_after.html

+ 23 - 2
css/13_清除浮动问题.html
查看文件 

@@ -10,7 +10,7 @@
 
             background: #999;
 
             background: #999;
 
             /* height:200px; */
 
             /* height:200px; */
 
 
 
-            overflow: hidden;
 
+            /* overflow: hidden; */
 
         }
 
         }
 
         #div1{
 
         #div1{
 
             width: 200px;
 
             width: 200px;
 
@@ -38,6 +38,15 @@
 
             background: pink;
 
             background: pink;
 
         }
 
         }
 
 
 
+        .clearfix::after{
 
+            /* 先生成伪元素 */
 
+            content:"";
 
+            /* 设置为块级元素 */
 
+            display: block;
 
+            /* 清浮动 */
 
+            clear:both;
 
+        }
 
+
 
     </style>
 
     </style>
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
@@ -50,11 +59,23 @@
 
         1 给元素添加高度
 
         1 给元素添加高度
 
         2 父元素添加一个overflow:hidden (方法技巧)
 
         2 父元素添加一个overflow:hidden (方法技巧)
 
 
 
+        3 在浮动的元素下添加一个元素(块级元素),通过clear:left|right|both清除浮动
 
+        4 给父元素添加 clearfix
 
+            .clearfix::after{
 
+                /* 先生成伪元素 */
 
+                content:"";
 
+                /* 设置为块级元素 */
 
+                display: block;
 
+                /* 清浮动 */
 
+                clear:both;
 
+            }
 
     -->
 
     -->
 
-    <div id="div0">
 
+    <div id="div0" class="clearfix" >
 
         <div id="div1"></div>
 
         <div id="div1"></div>
 
         <div id="div2"></div>
 
         <div id="div2"></div>
 
         <div id="div3"></div>
 
         <div id="div3"></div>
 
+        <!-- <div style="clear:both"></div> -->
 
+        <!-- 伪元素 -->
 
     </div>
 
     </div>
 
     <h2></h2>
 
     <h2></h2>

+ 27 - 0
css/14_after.html
查看文件 

@@ -0,0 +1,27 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        /* 伪元素选择器 在div的内部的后边 添加一个伪元素
 
+        
+            after内部的后边 
+            before 内部的前边
 
+        */
 
+        div::after{
 
+            content:"我是一个伪元素"
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+
 
+    <div>
 
+        哈哈哈
 
+        <!--  -->
 
+    </div>
 
+    
+</body>
 
+</html>