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规则实现的更多相关文章

  1. css两列布局，一边固定宽度，另一边自适应

    <!DOCTYPE HTML><HTML>    <head>                <meta charset="utf-8" ...

  2. CSS两列布局——左侧宽度固定，右侧宽度自适应的3种方法

    1.左侧绝对定位法 直接看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  3. CSS两列布局的N种实现

    一.什么是两列布局 两列布局分为两种,一种是左侧定宽.右侧自适应,另一种是两列都自适应(即左侧宽度由子元素决定,右侧补齐剩余空间).在CSS面试题里面属于常考题,也是一个前端开发工程师必须掌握的技能, ...

  4. CSS两列布局的多种方式

    两列布局(一侧固定宽度,一侧自适应),在工作中应该是经常使用到,可以说是前端基础了.这种两列布局的样式是我们在平时工作中非常常见的设计,同时也是面试中要求实现的高频题.很有必要掌握以备不时之需.这里总 ...

  5. css 两列布局中单列定宽单列自适应布局的6种思路

    前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...

  6. CSS两列布局

    方法1:左边设置绝对定位,右边设置左外边距,大小和左边的宽度相等 //CSS部分: .contain{ position :relative; height: 300px; } .left{ posi ...

  7. CSS 两列布局 之 左侧适应，右侧固定 3种方式

    第一种:左侧用margin-right,右侧float:right CSS代码: html, body,ul,li #wrapper { width: 100%; height: 100%; padd ...

  8. css 两列自适应布局的4种思路

    前面的话 前面已经介绍过css 两列布局中单列定宽单列自适应布局的6种思路的两列布局,而两列自适应布局是指一列由内容撑开,另一列撑满剩余宽度的布局方式.本文将从float.table.flex和gri ...

  9. CSS 布局实例系列（二）如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局

    最近在百度 IFE 训练营中看见的一道题目: 用两种不同的方法来实现一个两列布局,其中左侧部分宽度固定.右侧部分宽度随浏览器宽度的变化而自适应变化  个人总结出如下三种实现思路: 通过绝对定位实现 S ...

随机推荐

  1. 跟我学ASP.NET MVC之三：完整的ASP.NET MVC程序-PartyInvites

    摘要: 在这篇文章中,我将在一个例子中实际地展示MVC. 场景 假设一个朋友决定举办一个新年晚会,她邀请我创建一个用来邀请朋友参加晚会的WEB程序.她提出了四个注意的需求: 一个首页展示这个晚会 一个 ...

  2. 1. 开篇-springboot环境搭建

    最初学习strurs2时,虽然觉得也挺好用的,但也有一些不便的地方:1. 模型绑定必须要在Action中声明对应模型的成员变量:2. Action中对外提供调用的接口必须明确注明:3. 要声明一大堆的 ...

  3. mfc启动画面

    目标 用一张位图来作为启动画面,在进入程序时显示. 策略 在应用程序类的I n i t I n s t a n c e ()函数中,在最早时刻创建启动窗口.启动窗口用一个位图类显示在普通窗口中. 步骤 ...

  4. koa+mysql+vue+socket.io全栈开发之web api篇

    目标是建立一个 web QQ的项目,使用的技术栈如下: 后端是基于koa2 的 web api 服务层,提供curd操作的http接口,登录验证使用的是 json web token,跨域方案使用的是 ...

  5. Logistic回归（逻辑回归）和softmax回归

    一.Logistic回归 Logistic回归(Logistic Regression,简称LR)是一种常用的处理二类分类问题的模型. 在二类分类问题中,把因变量y可能属于的两个类分别称为负类和正类, ...

  6. netty 之 telnet HelloWorld 详解

    前言 Netty是 一个异步事件驱动的网络应用程序框架, 用于快速开发可维护的高性能协议服务器和客户端. etty是一个NIO客户端服务器框架,可以快速轻松地开发协议服务器和客户端等网络应用程序.它极 ...

  7. ASP.NET Core 项目实战（持续更新~~~）

    一.前言 准备写这个系列文章的设想开始于今年9月,毫无意外,期间又又又又拖了很长时间,文章主要是为了记录自己学习使用 ASP.NET Core Web API 与 Vue 创建一个前后端分离的项目的整 ...

  8. php session序列化攻击面浅析

    目录 0x00 首先,session_start()是什么? 0x01 初识php-session序列化机制 0x02 php_serialize引擎(反)序列化测试 0x03 当使用不同的引擎来处理 ...

  9. List-LinkedList、set集合基础增强底层源码分析

    List-LinkedList 作者 : Stanley 罗昊 [转载请注明出处和署名,谢谢!] 继上一章继续讲解,上章内容: List-ArreyLlist集合基础增强底层源码分析:https:// ...

  10. 深度学习与计算机视觉：基于Python的神经网络的实现

    在前面两篇文章介绍了深度学习的一些基本概念,本文则使用Python实现一个简单的深度神经网络,并使用MNIST数据库进行测试. 神经网络的实现,包括以下内容: 神经网络权值的初始化 正向传播 误差评估 ...