css两列布局之基于BFC规则实现
css要实现常见的自适应两列布局的方式方法挺多。
这里讲的是利用设置overflow不为visible时会形成新的BFC来实现。至于什么是BFC，可以搜搜看先，基本都讲的差不多了。等有更多空余时间，专门给讲讲BFC以及实例的东西。就这样吧，上代码：
<!-- 利用BFC的overflow hidden实现两列布局-->
<!DOCTYPE html>
<html lang="en">
<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 class="contain">
<div class="left">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 class="right">right这里的overflow:hidden不是本来的意思（超出容器内容截取掉不显示），而是利用了BFC规则（overflow不为visible时会创建出一个BFC）</div>
</div>
</body>
</html>
注意代码中最长的那行（37行），这里的文本不是英文，是拉丁文，当然不是我手打的这么多。跟大家分享下，在测试时，想输入一些内容又不知道输入什么，怪难看的时候，可以偷懒。输入lorem，然后tab键出来，除了第一句话时固定的，后面的那段时它随机出来的句子。前提是你的编辑器装有emmit插件，Hbuilder，vscode内置有，直接可用，submit text需要去装插件。记事本就肯定是不行的了，这些都是我亲测的。算是一个小干货吧！其他的，注释也差不多写了，本来代码也很简单，就这么些东西，css需要自己多动手去试，去实现出来。这次随笔就到这儿了，忙的时候质量可能不太好，不过现在开始坚持写一些东西了。
还有就是这是左边固定，右边自适应。右边固定，左边自适应相信你也能轻松搞定吧，这都是小事，想起了，提醒下。这个两列自适应不是两列都是自适应的.
最后,欢迎你的分享交流，欢迎留言你的发现！
css两列布局之基于BFC规则实现的更多相关文章
- css两列布局，一边固定宽度，另一边自适应
<!DOCTYPE HTML><HTML> <head> <meta charset="utf-8" ...
- CSS两列布局——左侧宽度固定，右侧宽度自适应的3种方法
1.左侧绝对定位法 直接看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- CSS两列布局的N种实现
一.什么是两列布局 两列布局分为两种,一种是左侧定宽.右侧自适应,另一种是两列都自适应(即左侧宽度由子元素决定,右侧补齐剩余空间).在CSS面试题里面属于常考题,也是一个前端开发工程师必须掌握的技能, ...
- CSS两列布局的多种方式
两列布局(一侧固定宽度,一侧自适应),在工作中应该是经常使用到,可以说是前端基础了.这种两列布局的样式是我们在平时工作中非常常见的设计,同时也是面试中要求实现的高频题.很有必要掌握以备不时之需.这里总 ...
- css 两列布局中单列定宽单列自适应布局的6种思路
前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...
- CSS两列布局
方法1:左边设置绝对定位,右边设置左外边距,大小和左边的宽度相等 //CSS部分: .contain{ position :relative; height: 300px; } .left{ posi ...
- CSS 两列布局 之 左侧适应，右侧固定 3种方式
第一种:左侧用margin-right,右侧float:right CSS代码: html, body,ul,li #wrapper { width: 100%; height: 100%; padd ...
- css 两列自适应布局的4种思路
前面的话 前面已经介绍过css 两列布局中单列定宽单列自适应布局的6种思路的两列布局,而两列自适应布局是指一列由内容撑开,另一列撑满剩余宽度的布局方式.本文将从float.table.flex和gri ...
- CSS 布局实例系列（二）如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局
最近在百度 IFE 训练营中看见的一道题目: 用两种不同的方法来实现一个两列布局,其中左侧部分宽度固定.右侧部分宽度随浏览器宽度的变化而自适应变化 个人总结出如下三种实现思路: 通过绝对定位实现 S ...
随机推荐
- python使用@property
在绑定属性时,如果我们直接把属性暴露出去,虽然写起来很简单,但是,没办法检查参数,导致可以把成绩随便改: s = Student() s.score = 9999 这显然不合逻辑.为了限制score的 ...
- MAC下的mysql忘记密码该怎么办？？
不要着急,不要慌,好多人会忙手忙脚,以为自己安装了一个假软件,其实是你打开的方式不对而已! step1: 苹果->系统偏好设置->最下边点mysql 在弹出页面中 关闭mysql服务(点击 ...
- java语言为什么能跨平台
参考https://blog.csdn.net/woailuo453786790/article/details/51660015 因为Java程序编译之后的代码不是能被硬件系统直接运行的代码,而是一 ...
- MySQL如何优化
对于全栈而言,数据库技能不可或缺,关系型数据库或者nosql,内存型数据库或者偏磁盘存储的数据库,对象存储的数据库或者图数据库--林林总总,但是第一必备技能还应该是MySQL.从LAMP的兴起,到Ma ...
- Golang 通用连接池库 Golang-Pool
Golang 实现的连接池 功能: * 连接池中连接类型为interface{},使得更加通用 * 链接的最大空闲时间,超时的链接将关闭丢弃,可避免空闲时链接自动失效问题 * 使用channel处理池 ...
- appium----【已解决】【Mac】ANDROID_HOME的环境变量配置
在搭建appium的环境时,提示Android_home的环境没有配置,经过一会的奋战终于解决,再次记录下解决方式. 1.安装android-sdk-macosx 下载路径:http://down.t ...
- 了解Scala 宏
前情回顾 了解Scala反射介绍了反射的基本概念以及运行时反射的用法, 同时简单的介绍了一下编译原理知识, 其中我感觉最为绕的地方, 就属泛型的几种使用方式了. 而最抽象的概念, 就是对于符号和抽象树 ...
- 使用Scala IDE for Eclipse遇到build errors错误的解决办法
在编写第一个Scala语言的Spark程序时,在Scala IDE for Eclipse中运行程序时出现“Project XXXX contains build errors, Continue l ...
- SVM分类器实现实例
我正在做一个关于SVM的小项目,在我执行验证SVM训练后的模型的时候,得到的report分数总是很高,无论是召回率(查全率).精准度.还是f1-score都很高: 图1 分类器分数report 但是, ...
- Dotnet全平台下APM-Trace探索
背景 随着支撑的内部业务系统越来越多,向着服务化架构进化,在整个迭代过程中,会逐渐暴露出以下问题. 传统依赖于应用服务器日志等手段的排除故障原因的复杂度越来越高,传统的监控服务已经无法满足需求. 终端 ...