基于BFC规则实现的css两列布局（代码示例）
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了基于BFC规则实现的css两列布局（代码示例），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2278字，纯文字阅读大概需要4分钟。
内容图文
本篇文章给大家带来的内容是关于基于BFC规则实现的css两列布局（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。css要实现常见的自适应两列布局的方式方法挺多。
这里讲的是利用设置overflow不为visible时会形成新的BFC来实现。至于什么是BFC，可以搜搜看先，基本都讲的差不多了。等有更多空余时间，专门给讲讲BFC以及实例的东西。就这样吧，上代码：
<!-- 利用BFC的overflow hidden实现两列布局-->
<!DOCTYPE html>
<html>
<head>
<title>利用BFC规则实现两栏布局</title>
<meta charset="utf8">
<style type="text/css">
* {
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;
}
</style>
</head>
<body>
<!-- CSS2.1规范中已经明确提出，设置overflow属性（非visible）能触发块级格式化上下文(Block Formatting Conext, BFC)。 -->
<div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia quis error ea veniam animi quibusdam, nobis repudiandae consectetur sed? Minus architecto cumque perspiciatis saepe rerum non dolorum voluptates similique, consequuntur.</div>
<div>right这里的overflow:hidden不是本来的意思（超出容器内容截取掉不显示），而是利用了BFC规则（overflow不为visible时会创建出一个BFC）</div>
</div>
</body>
</html>注意代码中最长的那行（37行），这里的文本不是英文，是拉丁文，当然不是我手打的这么多。跟大家分享下，在测试时，想输入一些内容又不知道输入什么，怪难看的时候，可以偷懒。输入lorem，然后tab键出来，除了第一句话时固定的，后面的那段时它随机出来的句子。前提是你的编辑器装有emmit插件，Hbuilder，vscode内置有，直接可用，submit text需要去装插件。记事本就肯定是不行的了，这些都是我亲测的。算是一个小干货吧！其他的，注释也差不多写了，本来代码也很简单，就这么些东西，css需要自己多动手去试，去实现出来。这次随笔就到这儿了，忙的时候质量可能不太好，不过现在开始坚持写一些东西了。
还有就是这是左边固定，右边自适应。右边固定，左边自适应相信你也能轻松搞定吧，这都是小事，想起了，提醒下。这个两列自适应不是两列都是自适应的。
【相关推荐：CSS视频教程】
以上就是基于BFC规则实现的css两列布局（代码示例）的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的基于BFC规则实现的css两列布局（代码示例）全部内容，希望文章能够帮你解决基于BFC规则实现的css两列布局（代码示例）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。