目录
这篇笔记主要是Float浮动的使用以及如何清除浮动。
1.display的取值
- 设置或检索对象是否及如何显示
- display:inline;指定对象为内联元素
- display:block;指定对象为块级元素
- display:none;隐藏对象,与visibility属性的hidden值不同,其不为被隐藏的对象保留其物理空间
- display: table-cell 指定对象作为表格单元格
- display:inline-block; 指定对象为内联块(行内块)元素
注:display: inline-block;特点与缺点
特点: 可以让上下结构的元素排列方式变成左右水平排列的方式(让元素在一行显示)
缺点: 行内块元素会受换行符和空格的影响产生间距;
行内块间距,解决办法: 给行内块元素的父元素添加属性font-size:0;
IE6/7下不兼容 ,解决办法: 给行内元素上添加*display:inline;*zoom:1;
2.display 与 visibility 区别
- display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏;
- visibility:hidden可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局 ;
- display:none可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失;
3.认识标准文档流及特性
- 文档流指的是元素在文档结构中的排列方式;
- 标准文档流:网页在解析的时候,遵循于从上向下,从左向右的一个顺序,而这个顺序就是来源于标准文档流;
- 脱离文档流:打破原本的从上到下,从左到右的排列方式,比如重叠 、叠加 、覆盖等非正常的文档流的排列布局情况;
- 脱离文档流的元素:浮动、绝对定位和固定定位。
4.浮动float
4.1.浮动的基础语法
该属性的值指出了对象是否及如何浮动。
- float:none;设置对象不浮动
- float:left;设置对象浮在左边
- float:right;设置对象浮在右边
特点:
1.浮动元素会脱离文档流,不占位,导致下面的元素会往上跑;
2.可以让元素排列到一行显示;
3.float:left左浮动是靠左显示; float:right 右浮动是靠右显示;
4.同时设置左浮动,元素是按照html结构的顺序从左往右依次排列;
5.同时设置右浮动,元素与html结构的顺序相反,从右往左依次排列;如果想要正常html结构顺序,用右浮动就需要把html结构调换位置即可;
6.浮动不会继承也不会传递;
缺点:
1.会导致父元素的高度失效 值为0,后面的元素识别不了它的高度,就会往前占领它的位置;
2.给父元素设置背景颜色不起作用;
3.给父元素设置边框属性不会被撑开;
4.给父元素设置内边距padding 不会被撑开。
4.2.float浮动的本质和特性
浮动的本质就是为了实现文字环绕效果,而这种文字环绕,主要指的就是文字环绕图片显示的效果。
float的特性
1.包裹性:由 “包裹” 和 “自适应性” 两部分组成;
- 包裹:假设浮动元素父元素宽度200px;浮动元素子元素是一个128px宽度的图片,则此时浮动元素宽度表现为”包裹”,就是里面图片的宽度128px;
- 自适应性:如果浮动元素的子元素不只是一张128px宽度的图片,还有一大波普通的文字,则此时浮动元素宽度就是自适应父元素的200px宽度,最终的宽度表现也是200px。
2.块状化并格式化上下文:块状化的意思是,元素一旦float的属性值不为none,则其display计算值就是block或者table。
// 浮动让元素块状化
span {
display: block; /* 这是多余代码 */
float: left;
}
span{
float: left;
vertical-align: middle; /* 这是多余代码 */
}
提示: 也不要指望使用text-align属性控制浮动元素的左右对齐,因为text-align对块级元素是无效的。
3.破坏文档流;
4.没有任何margin合并;
4.3.float浮动的作用机制
- float著名的特性表现:会让父元素的高度塌陷; 高度塌陷:让跟随的内容可以和浮动元素在一个水平线上;
- float 与流体布局:利用float破坏css正常流的特性,实现两栏或多栏的自适应布局;
4.4.float的天然克星
clear属性官方解释:元素盒子的边不能和前面的浮动元素相邻;
- clear: none 默认值,左右浮动来就来;
- clear: left 左侧抗浮动;
- clear: right 右侧抗浮动;
- clear: both 两侧抗浮动;
clear属性只有块级元素才有效的;而::after等伪元素默认都是内联水平,这就是借助伪元素清除浮动影响时需要设置display属性值的原因.
.clear:after{
content:'';
display:block; // 也可以是"table"或者"list-item"
clear:both;
}
5.BFC与IFC
5.1.BFC的含义
BFC(Block Formatting Context)叫做“块级格式化上下文”;
5.2.BFC的表现原则
如果一个元素具有BFC,内部子元素再怎么翻江倒海、翻云覆雨,都不会影响外部的元素。
5.3.BFC布局规则
1.内部的盒子会在垂直方向,一个个地放置;
2.盒子垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的上下margin会发生重叠;
3.每个元素的左边,与包含的盒子的左边相接触,即使存在浮动也是如- 此;
4.BFC的区域不会与float重叠;
5.BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之也如此;
6.计算BFC的高度时,浮动元素也参与计算。
5.4.产生BFC的元素
1.html根元素或其他包含它的元素;
2.float的属性不为none;
3.overflow为auto、scroll、hidden;
4.display为inline-block,table-cell,table-caption中的任何一个;
5.position为absolute或fixed;
5.5.BFC的用处
1.清除浮动
2.布局:自适应两栏布局
3.防止垂直margin合并
5.6.IFC的含义
IFC(Inline Formatting Context)叫做“行内格式化上下文”
5.7.IFC布局规则
在行内格式化上下文中,框(boxes)一个接一个地水平排列,起点是包含块的顶部。水平方向上的 margin,border 和 padding在框之间得到保留。框在垂直方向上可以以不同的方式对齐:它们的顶部或底部对齐,或根据其中文字的基线对齐。包含那些框的长方形区域,会形成一行,叫做行框.
6.清除浮动的方法(重点)
6.1.清除浮动之给父盒子加固定高度
给前面浮动元素的父元素设置一个固定高度
注意点: 实际项目开发中, 我们能不写高度就不写高度, 所以这种方式用得很少
6.2.清除浮动之clear:both;
给上级的盒子添加clear属性
6.3.清除浮动之overflow:hidden
- overflow : visible: 对溢出内容不做处理,内容可能会超出容器。
- overflow : hidden: 隐藏溢出容器的内容且不出现滚动条。
- overflow : scroll: 隐藏溢出容器的内容,溢出的内容将以卷动滚动条的方式呈现。
- overflow : auto: 当内容没有溢出容器时不出现滚动条,当内容溢出容器时出现滚动条,按需出现滚动条。此为body对象和textarea的默认值。
- overflow的效果等同于overflow-x + overflow-y。
6.4.清除浮动之隔墙法与内墙法
- 外墙法 : 在两个盒子中间添加一个额外的块级元素 ,给这个额外添加的块级元素设置clear: both;属性
注意点: 外墙法它可以让第二个盒子使用margin-top属性 ;外墙法不可以让第一个盒子使用margin-bottom属性。 - 内墙法 : 在第一个盒子中所有子元素最后添加一个额外的块级元素 , 给这个额外添加的块级元素设置clear: both;属性
注意点: 内墙法它可以让第二个盒子使用margin-top属性 , 内墙法它可以让第一个盒子使用margin-bottom属性。
// 具备两个条件:
// 1.具有块特点的标签,就算不是块级标签也需要转换为块级标签
// 2.给这个块级标签添加一个属性clear:both
<div class="main">
<div class="right">2</div>
<div class="left">1</div>
<div style="clear:both;"></div>
</div>
<div class="main">
<div class="right">2</div>
<div class="left">1</div>
<a style="display:block;clear:both;"></a>
</div>
6.5.清除浮动之clearfix法
利用clearfix 去清除浮动(实际项目中最常用的方法)——我是一块砖 哪里需要 就往哪里搬
<style type="text/css">
.clearfix:afer{
content:'';
display:block;
clear:both;
}
</style>
<div class="main clearfix">
<div class="right">2</div>
<div class="left">1</div>
</div>
<div class="main1 clearfix">
<div class="right">2</div>
<div class="left">1</div>
</div>
// 最完整clearfix清除浮动的方法:
.clearfix:after{
content:'';
display:block;
clear:both;
width:0;
height:0;
line-height:0;
font-size:0;
visibility: hidden;
overflow:hidden;
}
.clearfix{
zoom:1;
}
有趣的面试题:发挥想象力CSS让元素消失在视野中。
- display: none 让元素消失
- font-size:0 字体大小为0
- width:0; overflow:hidden 宽度为0 而且溢出隐藏
- height:0; overflow:hidden 高度为0 而且溢出隐藏
- line-height:0; overflow:hidden 行高为0 而且溢出隐藏
- visibility: hidden; 可见性的元素隐藏消失
- opacity: 0; 透明度为0
- color / background: transparent 字体颜色或者背景颜色为透明
- text-indent: -9999px; 首段缩进足够大的负值
- position: absolute; left/top/bottom/right :-9999px; 定位 + - 方位的足够大的负值
- margin-top/bottom/left/right: -9999px; 的四个方位的足够大的负值
- transform: translateX(-9999px) / translateY(-9999px); 位移坐标值足够大的负值
- transform: scale(0); 缩放比为0