基于BFC规则实现的css两列布局
导读： css要实现常见的自适应两列布局的方式方法挺多。 这里讲的是利用设置overflow不为visible时会形成新的BFC来实现。至于什么是BFC，可以搜搜看先，基本都讲的差不多了。等有更多空余时间，专门给讲讲BFC以及实例的东西。...
css要实现常见的自适应两列布局的方式方法挺多。
这里讲的是利用设置overflow不为visible时会形成新的BFC来实现。至于什么是BFC，可以搜搜看先，基本都讲的差不多了。等有更多空余时间，专门给讲讲BFC以及实例的东西。就这样吧，上代码：
利用BFC规则实现两栏布局
*{
margin:0;
padding:0;
}
.contain{
width:100%;
height:100%;
background:grey;
color:#fff;
}
.contain.left{
float:left;
/*margin-right:20px;
*/
width:200px;
height:100%;
word-wrap:break-word;
/*用于纯数字和英文时能够超出时自动换行*/
background:blue
}
.contain.right{
height:100%;
overflow:hidden;
/*让right成为一个BFC*/
word-wrap:break-word;
/*用于纯数字和英文时能够超出时自动换行*/
background:darkblue;
}
Loremipsumdolorsitamet,consecteturadipisicingelit.Officiaquiserroreaveniamanimiquibusdam,nobisrepudiandaeconsectetursed?Minusarchitectocumqueperspiciatissaepererumnondolorumvoluptatessimilique,consequuntur.
right这里的overflow:hidden不是本来的意思（超出容器内容截取掉不显示），而是利用了BFC规则（overflow不为visible时会创建出一个BFC）
本文转载自中文网
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 基于BFC规则实现的css两列布局
本文地址： https://pptw.com/jishu/664733.html