两栏布局,两个经典bug,触发bfc效果

193 阅读2分钟

两栏布局的方法、两个经典bug的解决方法、触发bfc效果的方法。

两栏布局:

两栏布局是指让两个div结构并列到一排,但是div结构是块级元素,一般情况下不能实现。所以思路就是让它们一个固定,一个自适应,因为通过绝对定位可以实现自适应。

具体方法如下:

html
<div class="demo1"></div>
<div class="demo2"></div>
css
*{
    margin:0;
    padding:0;
}
.demo1{
    position:absolute;
    right:0;
    width:100px;
    height:100px;
    background-color:red;
}
.demo2{
    height:100px;
    background-color:blue;
    margin-right:100px;
}

效果如图

效果图

margin塌陷、margin合并:

margin塌陷是指当具有父子级关系的两个盒子放在一起时如图

这时你想要让绿色方块挪到黑色盒子右下角,加上margin-top:50px;是办不到的,因为存在margin塌陷,但是你要加上margin-top:150px;就可以,就好似黑色盒子的屋顶塌了一样,解决办法是啥呢?

这时需要触发bfc效果,触发了bfc效果之后,margin塌陷就可以解决了。那么触发bfc效果的方法有哪些?在父级元素下加上以下属性:[

  • position : absolute;
  • display : inline-block;
  • float:right/left;
  • overflow : hidden;
]

在父级标签下加上以上属性,就可以实现以上功能了。

margin合并是指,当两个方块处于上下分层时,上面的方块margin-bottom:100px;,使下面的方块margin-top:100px;这时下面方块的margin-top的值失效了,因为它和上面的margin-bottom的值合并了,所以就要解决合并问题,让它们中间可以隔开200px,又要用到触发bfc效果了。

注意:

使用触发bfc效果的方法时需要注意:要根据特定要求进行使用,比如需要消除溢出部分时,就可以使用overflow:hidden;一举多得。

今天的介绍就到这了,今天很累,写得不仔细,希望大家不要介意哈!