html两栏 自适应布局,css,html_BFC两栏自适应布局，css,html - phpStudy

BFC两栏自适应布局

实现两栏自适应布局，左边浮动，右边设置overflow为hidden触发BFC。

HTML代码：

left

right

CSS代码：

.container {

width: 500px;

height: 200px;

border: 1px solid black;

margin: 10px auto;

}

.left {

float: left;

width: 100px;

height: 100px;

border: 1px solid red;

float: left;

}

.right {

overflow: hidden;

border: 1px solid blue;

height: 100px;

margin-left: 110px;

width: 100px;

}

效果是这样的:

如果我将right的css中overflow:hidden去掉，换成display:inline-block;那么上面的效果就是如下图：

为什么两者表现不一样？overflow:hidden和display:inline-block不是都触发了BFC么？为什么overflow:hidden的margin-left参考是container呢？

相关阅读:

Python 定义类时, 为何该值不是所有实例共享的 ?

JavaScript 如何从多张base64字符串中分隔

eclipse安装失败，32位的jdk，32位的eclipse...求助......

MySQL可变商品数据模型的设计

php switch continue 什么意思??

mac电脑可以上网但是ping不通所有的ip，这是怎么回事呢

TortoiseSVN创建本地仓库后如何设置账号权限管理

python多进程/线程抢占stdoutput总是在固定位置截断上个输出？

npm install 报错，不知道哪里出问题

-moz-box-shadow这么写在火狐上没有效果怎么回事

使用vue.js时，html文件中标签可以在没有js中声明component的前提下直接使用吗？

求用户个性定制皮肤的原理？

node+express+mongodb项目在本地实现,要怎么打包发布?

本地服务器中静态资源如何发布到百度CDN上，进行引用

JS 两种for有什么区别？

wordpress中的一个普通文档为何发布后没有换行？

angularjs的问题：点击”选择图片“后，需要很长的时间才能选择图片

windows下chrome，渲染页面时如果页面内容比较少不足以overflow， 先出现滚动条，马上就消失，如百度首页

使用crontab执行py脚本出错

docker网络端口映射，没有方便点的操作方法么？