BFC 两列布局,左侧固定,右侧自适应

题目: 实现一个两列布局,左侧宽度150,右侧自适应
这是一段完整的代码




    BFC
    
    



    

自适应两栏布局

清除内部浮动

防止垂直margin重叠

哈哈

haha

BFC 两列布局,左侧固定,右侧自适应_第1张图片
image.png
BFC 两列布局,左侧固定,右侧自适应_第2张图片
image.png

这是效果,
BFC是块级格式化上下文,一个创建了新的BFC 的盒子是独立布局的,盒子内元素的布局不会影响盒子外部的元素,在同一个BFC中的两个相邻的盒子在垂直方向发生margin 重叠的问题

实现一个两列布局,左侧宽度150,右侧自适应

方法二 左边position:absolute;右边margin-left:200px;

left1
right1

方法三 左边浮动,右边margin-left

left1
right1

方法四 position :absolute 也能达到效果

left1
right1

你可能感兴趣的:(BFC 两列布局,左侧固定,右侧自适应)