css中的clear:both,display:flex;
介绍两者一起讨论的原因：
在明天就国庆的日子里陪着程序员的只有代码，啤酒，还有音乐，然后就是灯光下默默陪伴自己的影子。好了，不矫情了。
-----------------------------------------------------------
先上两张图，然后慢慢道来......
第一张是实现的布局，第二张是布局的代码。简单的说明一下:图一中有4块为classname为newsItem的div容器(代码有点乱看起来有点吃力)，这4个容器包含在classname为newsRow的section中。每个newsItem容器里面又分了calssname的newsItem_left和newsItem_right的2个容器，分别代表每个newsItem容器的左和右的部分。然后定位如第一张图的样式！！
可能你会说这不简单，newsItem的display属性设置成inline-block。然后设置其width，margin属性,接着就是设置left和right样式，就可以设置成上面的样子了！但是，我在left和right的div里面是用flex布局，导致其父元素newsItem容器不得不设置为display:flex;接着使用float;于是4个newsItem容器脱离了文档流，导致newsRow的section的容器，没有了高度；于是要清除浮动了；于是想一起讨论清除浮动和flex布局。
清除浮动的几种方法
1，使用空标签清除浮动。
2，使用overflow属性。
3，使用after伪对象清除浮动。
4，浮动外部元素。
这里就不上我那个复杂css的代码了,借鉴一下网上代码！
第一种方法的代码:
<style type=”text/css”>
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
.clear{clear:both;}
</style> <body>
<div id=”layout”>
<div id=”left”>Left</div>
<div id=”right”>Right</div>
<div class=”clear”>
</div>
</div>
</body>
说明:在left,right同级里面加一个div空标签(可以是其他标签，如p,br),给其设置clear:both属性。
第二种方法的代码:
<style type=”text/css”>
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;overflow:auto;zoom:1; }
/* overflow:auto可以换成overflow:hidden，zoom:1可以换成width:100%*/
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
</style>
<body>
<<div id=”layout”>
<div id=”left”>Left</div>
<div id=”right”>Right</div>
</div>
</body>
说明:给父元素添加一个overflow:auto也可以换成overflow:hidden，为了兼容万恶的ie6添加zoom:1也可以换成width:100%;
第三种方法的代码
<style type=”text/css”>
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;}
#layout:after{display:block;clear:both;content:””;visibility:hidden;height:0;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
</style>
<body>
<<div id=”layout”>
<div id=”left”>Left</div>
<div id=”right”>Right</div>
</div>
</body>
说明：一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像 素；二、content属性是必须的，但其值可以为空。
第4中方法代码
<style type=”text/css”>
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9; float:left;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
</style>
<body>
<<div id=”layout”>
<div id=”left”>Left</div>
<div id=”right”>Right</div>
</div>
</body>
说明:就是给父元素也加一个folat:left;但是这种方法有一个 毛病，导致父元素的下一个相邻的元素会位置就会发生变化，因为此时layout元素是脱离文档流的。
flex的布局
flex布局是指:
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
兼容的浏览器:
目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。任何一个容器都可以指定为Flex布局。
#box{
display: flex;
width: 500px;
height: 300px;
border: 10px solid red;
}
一：有六个属性设置在box父容器上，来控制子元素的显示方式；分别是：
- flex-direction 设置主轴对齐方式 默认 row x轴从左到右；
- flex-wrap 子元素换行的方式 默认nowrap ；
- flex-flow flex-direction和flex-wrap的简写 默认row nowrap；
- justify-content 子元素的对齐方式 默认flex-start 左对齐
- align-items 交叉轴如何对其
- align-content 多跟轴线的对其方式
二：有六个属性设置在子元素项目上：
order 子元素排列的位置 ，默认先后顺序flex-grow 放大比例，默认为0flex-shrink 缩小比例，默认为1flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。flex flex属性是flex-grow,flex-shrink和flex-basis的简写，默认值为0 1 auto。后两个属性可选。align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性
css中的clear:both,display:flex;的更多相关文章
- 使用Sass优雅并高效的实现CSS中的垂直水平居中(附带Flex布局，CSS3+SASS完美版)
实现css水平垂直居中的方法有很多,在这里我简单的说下四种比较常用的方法: 1.使用CSS3中的Flex布局 对于flex,我们要了解的是它是一个display的属性,而且必须要给他的父元素设置fle ...
- CSS中你知道的display的值有多少？用了多少？
它的语法如下: display:none | inline | block | list-item | inline-block | table | inline-table | table-capt ...
- css中的clear的正真意义
网上包括w3cschool 的说法都是 不允许浮动.消除浮动 这样的说法,却看了还是不知道什么意思,一些地方说不通. 所以找到w3c css 的英文文档,如下是节选: 'clear'Values ha ...
- css 中visibility:hidden和display:none有什么区别呢
<div style="width:100px;height:100px;background:red;visibility:hidden"></div>/ ...
- 多栏多列布局（display:flex）
display:flex 多栏多列布局浏览器支持情况:火狐直接支持w3c无前缀写法,谷歌和opera支持-webkit- 前缀写法,比较适合移动端开发使用, display:flex 这个牛逼的css ...
- 深入理解CSS中的层叠上下文和层叠顺序(转)
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...
- 深入理解CSS中的层叠上下文和层叠顺序
零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在C ...
- display:flex 多栏多列布局
转自:http://www.360doc.com/content/14/0811/01/2633_400926000.shtml display:flex 多栏多列布局浏览器支持情况:火狐直接支持w3 ...
- css基础--深入理解弹性盒flex布局
欢迎访问我的个人博客:http://www.xiaolongwu.cn 1. 前言 flex弹性盒,是一种布局方式,当页面需要适应不同的屏幕大小以及设备类型时,它依然能确保元素 拥有更恰当的排布行为, ...
随机推荐
- C 语言 ioctl
/* *@author cody *@date 2014-08-12 *@description */ /* #include <sys/ioctl.h> send control and ...
- linux系统的开机引导、启动流程
固件(CMOS/BIOS) > POST 加电自检 ↓ 自举程序(GRUB)> 加载内核 ↓ 载入内核 > 驱动硬件 ↓ 启动进程 init ↓ 读取执行配置文件/etc/initt ...
- c# 多线程里面创建byte数组发生内存溢出异常求解
在多线程里面读取一个400多M的Xml文件,首先将其读入FileStream里面,然后,在执行 byte [] bts = new byte[fs.Length]; 这句代码时,出现内存溢出的异常,求 ...
- 基于Redis实现延迟队列
背景 在后端服务中,经常有这样一种场景,写数据库操作在异步队列中执行,且这个异步队列是多进程运行的,这时如果对同一资源进行写库操作,很有可能产生数据被覆盖等问题,于是就需要业务层在更新数据库之前进行加 ...
- STM32F10x_SPI（硬件接口 + 软件模拟）读写Flash（25Q16）
推荐 分享一个大神的人工智能教程.零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到人工智能的队伍中来! http://www.captainbed.net/strongerhuang Ⅰ.写在前 ...
- vim中ctags应用
ctags(Generate tag files for source code)是vim下方便代码阅读的工具.尽管ctags也可以支持其它编辑器,但是它正式支持的只有VIM.并且VIM中已经默认安装 ...
- Problem b 莫比乌斯反演+枚举除法的取值
莫比乌斯反演+枚举除法的取值 第二种形式: f(n)表示gcd(x,y)=n的数量. F(n)表示gcd(x,y)是n的倍数的数量. /** 题目:Problem b 链接:https://vjudg ...
- ExtJS TreeGrid的使用方法
假设您是第一次使用ExtJS的TreeGrid的话,我相信总会有一些小麻烦的,以下就来说一说ExtJS中TreeGrid的使用. 本人使用的ExtJS版本号为4.1.1,而且使用了MVC模式.假设不了 ...
- liunx下安装mysql（未完待更新）
1.下载mysql-liunx 下载地址:http://download.csdn.net/download/yichen01010/10019139 2.删除系统自带mysql rpm -qa|gr ...
- liunx下安装tomcat7.0.82
1.apache-tomcat-liunx-7.0.82下载地址: http://download.csdn.net/download/yichen01010/10019116 2.下载后解压即可 c ...