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作用

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