3.8学习总结

1. 文字环绕图片
   给图片float

.main{width: 400px;word-wrap: break-word;word-break: break-all;}img{float: left}<div class="main">    <img src="apple.png" alt="apple">    <p>vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv</p></div>

1. 边缘不和浮动元素重叠

   • 用absolute

.outer{border: 1px solid black;position: relative;position: absolute;}.inner{width: 100px;height: 100px;background: red;float: left}<div class="outer">    <div class="inner"></div></div>

结果如下：

---

• 用overflow

.outer{border: 1px solid black;position: relative;overflow:hidden;}.inner{width: 100px;height: 100px;background: red;float: left}<div class="outer">    <div class="inner"></div></div>

结果如下

---

1. bfc作用

   • 可以清除浮动
   • 解决外边距叠加的问题
   • 通过边缘不和浮动元素重叠的特性，实现两栏布局