两栏布局两个经典的bugBFC/浮动流

两蓝布局

.right{
    position: absolute;
    right: 0;
    background-color: aqua;
    width: 100px;
    height: 100px;
    opacity: 0.5;
}
.left{
    margin-right: 100px;
    height: 100px;
    background-color: brown;
}

垂直方向的margin父子粘合在一起,取最大值
margin塌陷
改变大盒子渲染规则

.wrapper{
    margin-left: 100px;
    margin-top: 100px;
    width: 100px;
    height: 100px;
    background-color: aquamarine;
}
.content{
    margin-top: 150px;
    margin-left: 50px;
    width: 50px;
    height: 50px;
    background-color: brown;
}

解决

<!-- bfc -->
    <!-- block format context -->
    <!-- 如何出发盒子的bfc 
    1,position:absolute
    2,display:inline-block
    3,float:left/right
    4,overflow:hidden溢出部分隐藏-->

.wrapper{
    margin-left: 100px;
    margin-top: 100px;
    width: 100px;
    height: 100px;
    background-color: aquamarine;
    /* overflow: hidden; */
    display: inline-block;
    position: absolute;
}
.content{
    margin-top: 60px; 
    margin-left: 50px;
    width: 50px;
    height: 50px;
    background-color: brown;
}

兄弟之间也会出现按

    <div class="wrapper"></div>
    <div class="content"></div>

css

.wrapper{
    width: 100px;
    height: 100px;
    margin-bottom: 200px;
    background-color: aquamarine;
}
.content{
    margin-top: 200px; 
    width: 100px;
    height: 100px;
    background-color: brown;
}

上下距离只会200px,或选取最大,不会累加
解决
写一个下面的包含他的父类设置成overflow: hidden;

<div class="wrapper"></div>
    <div class="dasf">
    <div class="content"></div>
    </div>

.wrapper{
    width: 100px;
    height: 100px;
    margin-bottom: 200px;
    background-color: aquamarine;
}

.dasf{
    overflow: hidden;
}
.content{
    margin-top: 200px; 
    width: 100px;
    height: 100px;
    background-color: brown;
}

不能因为改BUG而加结构(上面感觉白写了)
真正的解决方法通过数学计算求他俩的总距离

浮动元素float: right;和left后面有位置就去占一个

1,浮动元素产生了浮动流,所有产生了浮动元素,块级元素看不到他们,产生了bfc的元素和文本类元素(inline)以及文本都能看到浮动元素
clear: both;清除流
如果想让父级元素包住自己元素在最后一个子级加上clear:both;清除浮动,(不推荐用的方法:在浮动流元素后面添加标签如:<p>标签的属性加上清除就ok了)
推荐使用伪元素https://www.jianshu.com/p/f8d531ab4b55
在父级元素的::after伪元素使用clear:both;
如果想要clear生效的话必须是块级元素
那么after里面加上display block属性就ok了
还有一种解决就是在父级元素上面添加浮动元素的需求比如给他也添加浮动元素,float ,inline 等
浮动流都是位于他下面的元素

.mm{
    
    float: left;
    width: 100px;
    height: 100px;
    background-color: blue;
    opacity: 0.5;
}
.ww{
    display: inline-block;//删除试试看
    width: 200px;
    height: 200px;
    background-color: aquamarine;
}

设置position:abolute; float:left/right会打内部吧元素转换成inline-block
浮动可以做文字环绕图片

最后编辑于：2018.11.23 11:55:01