fix

blog/front-end-learn/css-float.md

@@ -100,3 +100,84 @@ CSS 书写顺序
 
 - 内减模式：box-sizing: border-box;
 - 版心居中： margin: 0 auto;
+
+## 清除浮动
+
+清除浮动带来的影响
+
+影响：如果子元素浮动了，此时子元素不能撑开标准流的块级父元素
+
+[](demo/css-float-4.html ':include :type=code')
+
+[](demo/css-float-4.html ':include height=220')
+
+清除浮动的方法
+
+1. 直接设置父元素高度
+
+2. 额外标签
+
+- 在父元素内容的最后添加一个块级元素
+
+- 给添加的块级元素设置 clear:both;
+
+```css
+.clearfix {
+  clear: both;
+}
+```
+
+3. 单伪元素清除法
+
+用伪元素替代了额外标签
+
+优点：直接给标签加类即可清除浮动
+
+（1）基本写法
+
+```css
+.clearfix::after {
+  content: '';
+  display: block;
+  clear: both;
+}
+```
+
+（2）补充写法
+
+```css
+.clearfix::after {
+  content: '';
+  display: block;
+  clear: both;
+
+  /* 兼容低版本IE */
+  height: 0;
+  visibility: hidden;
+}
+```
+
+4. 双伪元素清除法
+
+```css
+/* 解决外边距塌陷问题 */
+.clearfix::before,
+.clearfix::after {
+  content: '';
+  display: table;
+}
+
+.clearfix::after {
+  clear: both;
+}
+```
+
+5. 给父元素设置 overflow:hidden
+
+```css
+overflow: hidden;
+```
+
+[](demo/css-float-5.html ':include :type=code')
+
+[](demo/css-float-5.html ':include height=240')

blog/front-end-learn/css-product.md

+# CSS 实战
+
+网站项目目录
+
+```
+index.html
+css
+js
+img
+```
+
+清除浏览器默认样式
+
+```css
+/* reset.css */
+
+* {
+  margin: 0;
+  padding: 0;
+  /* 内减模式 */
+  box-sizing: border-box;
+}
+
+li {
+  list-style: none;
+}
+
+a {
+  text-decoration: none;
+}
+
+/* 清除浮动 */
+.clearfix::before,
+.clearfix::after {
+  content: '';
+  display: table;
+}
+
+.clearfix::after {
+  clear: both;
+}
+
+body {
+  background-color: #f3f5f7;
+}
+
+/* 版心居中 */
+.wrapper {
+  width: 1200px;
+  margin: 0 auto;
+}
+```
+
+控制 input placeholder 样式
+
+```css
+input::placeholder {
+}
+```
+
+调节图片上下对齐
+
+```css
+img {
+  vertical-align: middel;
+}
+```
+
+通栏盒子
+
+```css
+/* 占据屏幕整个宽度 */
+.box {
+  width: 100%;
+}
+```

blog/front-end-learn/demo/css-float-4.html

+<style>
+    /* 初始化样式 */
+    * {
+        margin: 0;
+        padding: 0;
+    }
+
+    /* 外层容器 */
+    .box {
+        background-color: #ccc;
+        /* margin: 0 auto; */
+    }
+
+    /* 左边 */
+    .left {
+        float: left;
+        width: 200px;
+        height: 200px;
+        background-color: pink;
+    }
+
+    /* 右边 */
+    .right {
+        float: right;
+        background-color: green;
+        width: 200px;
+        height: 200px;
+    }
+
+    .footer {
+        height: 20px;
+        background-color: saddlebrown;
+    }
+</style>
+
+<div class="box">
+    <div class="left"></div>
+    <div class="right"></div>
+</div>
+
+<!-- 期望footer元素紧跟box下面排列 -->
+<div class="footer"></div>
\ No newline at end of file

blog/front-end-learn/demo/css-float-5.html

+<style>
+    /* 初始化样式 */
+    * {
+        margin: 0;
+        padding: 0;
+    }
+
+    /* 外层容器 */
+    .box {
+        background-color: #ccc;
+        /* margin: 0 auto; */
+    }
+
+    /* 左边 */
+    .left {
+        float: left;
+        width: 200px;
+        height: 200px;
+        background-color: pink;
+    }
+
+    /* 右边 */
+    .right {
+        float: right;
+        background-color: green;
+        width: 200px;
+        height: 200px;
+    }
+
+    .footer {
+        height: 20px;
+        background-color: saddlebrown;
+    }
+
+    .clearfix::before,
+    .clearfix::after {
+        content: '';
+        display: table;
+    }
+
+    .clearfix::after {
+        clear: both;
+    }
+</style>
+
+<!-- 清除浮动 -->
+<div class="box clearfix">
+    <div class="left"></div>
+    <div class="right"></div>
+</div>
+
+<!-- 期望footer元素紧跟box下面排列 -->
+<div class="footer"></div>
\ No newline at end of file

blog/front-end-learn/index.md

@@ -31,3 +31,5 @@
 8. [CSS 特性](blog/front-end-learn/css-priority.md)
 
 9. [CSS 浮动](blog/front-end-learn/css-float.md)
+
+10. [CSS 实战](blog/front-end-learn/css-product.md)