文字环绕图片 给图片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>
边缘不和浮动元素重叠
用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>
结果如下
bfc作用
可以清除浮动解决外边距叠加的问题通过边缘不和浮动元素重叠的特性，实现两栏布局
转载请注明原文地址: https://ju.6miu.com/read-6820.html
