练习

2021-04-29 17:16:40 +08:00
parent 812be57880
commit 55c598cdb1
195 changed files with 12788 additions and 34 deletions
--- a/teaching/林锦绣/float.html
+++ b/teaching/林锦绣/float.html
@@ -0,0 +1,69 @@
+<!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>
+        *{
+            margin:0;
+            padding:0;
+        }
+        .box{
+            width: 200px;
+            height: 200px;
+            background: red;
+            float:left
+            
+        }
+        .box1{
+            width:200px;
+            height: 200px;
+            background: blue;
+            float:right
+        }
+        .box3{
+            width:200px;
+            height: 200px;
+            background: pink;
+            
+            /* clear: both; */
+        }
+        /* 
+            display: inline-block    水平排列( 既能设置宽高 又能实现水平排列   从左往右)
+            float   水平排列
+            float  既可以从左往右  又能从右往左  
+            
+
+
+            浮动元素能够和块级元素 重叠 但是不能跟行框盒子盒子
+            float 造成的父元素高度塌陷的问题
+
+            想给谁清浮动就给谁加clear:both
+            伪元素
+            给加空盒子然后加clear:both;
+            overflow  给父级元素加
+            
+
+         */
+    </style>
+</head>
+<body>
+    <div style="overflow: auto;">
+        <div class="box"></div>
+        <div class="box1"></div>
+        <!-- <p>
+            float   水平排列
+                float  既可以从左往右  又能从右往左  float   水平排列
+                float  既可以从左往右  又能从右往左  float   水平排列
+                float  既可以从左往右  又能从右往左  float   水平排列
+                float  既可以从左往右  又能从右往左  float   水平排列
+                float  既可以从左往右  又能从右往左  float   水平排列
+                float  既可以从左往右  又能从右往左  
+        </p> -->
+        
+    </div>
+    <div class="box3"></div>
+</body>
+</html>