前端从零开始——第二周第一天笔记

2018-11-25  本文已影响0人  Hero行者

这篇笔记主要是Float浮动的使用以及如何清除浮动。

1.display的取值

设置或检索对象是否及如何显示

2.display 与 visibility 区别

3.认识标准文档流及特性

4.浮动float

4.1.浮动的基础语法

该属性的值指出了对象是否及如何浮动。

特点：
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.包裹性：由 “包裹” 和 “自适应性” 两部分组成;

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浮动的作用机制

4.4.float的天然克星

clear属性官方解释：元素盒子的边不能和前面的浮动元素相邻；

clear属性只有块级元素才有效的；而::after等伪元素默认都是内联水平，这就是借助伪元素清除浮动影响时需要设置display属性值的原因.

.clear:after{
    content:'';
    display:block; // 也可以是"table"或者"list-item"
    clear:both;
}

5.BFC与IFC

大牛博客：BFC详解

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

6.4.清除浮动之隔墙法与内墙法

// 具备两个条件:
// 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让元素消失在视野中。

上一篇 下一篇

猜你喜欢

热点阅读