浮动布局模型实战应用

浮动布局模型实战应用

1.文档流和脱离文档流

认识标准文档流及特性

• 文档流 : 指的是元素在文档结构中的排列方式；
• 标准文档流：网页在解析的时候，遵循于从上向下，从左向右的一个顺序，而这个顺序就是来源于标准文档流；
• 脱离文档流：打破原本的从上到下，从左到右的排列方式，比如重叠 、叠加 、覆盖等非正常的文档流的排列布局情况；

脱离文档流的元素

• 浮动 float:left/right
• 绝对定位 position:absolute
• 固定定位 position:fixed

2.浮动元素的特点

• 浮动元素会脱离文档流，不占位，导致下面的元素会往上跑；
• 可以让元素排列到一行显示；
• float:left左浮动是靠左显示; float:right 右浮动是靠右显示；
• 同时设置左浮动，元素是按照html结构的顺序从左往右依次排列；
• 同时设置右浮动，元素与html结构的顺序相反，从右往左依次排列；如果想要正常html结构顺序，用右浮动就需要把html结构调换位置即可；
• 浮动不会继承也不会传递；

3.浮动元素的取值

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

• none：设置对象不浮动
• left：设置对象浮在左边
• right：设置对象浮在右边

4.浮动产生的影响

• 会导致父元素的高度失效 值为0，后面的元素识别不了它的高度，就会往前占领它的位置；
• 给父元素设置背景颜色不起作用
• 给父元素设置边框属性不会被撑开
• 给父元素设置内边距padding 不会被撑开

5.浮动的本质和特性

浮动的本质

• 就是为了实现文字环绕效果，而这种文字环绕，主要指的就是文字环绕图片显示的效果

float浮动的特性

• 1、包裹性: 由 “包裹” 和 “自适应性” 两部分组成; ；

//包裹:假设浮动元素父元素宽度200px;
//浮动元素子元素是一个128px宽度的图片，则此时浮动元素宽度表现为”包裹”，就是里面图片的宽度128px；
<style>
  .father{width: 200px;}
  .float{float:left;}
  .float img{width: 128px;}
</style>
<div class="father">
    <div class="float">
        <img src="http://www.zhufengpeixun.cn/skin/20142/img/logo.png" alt="">
    </div>
</div>

//自适应性 
//如果浮动元素的子元素不只是一张128px宽度的图片，还有一大波普通的文字，例如：
<div class="father">
    <div class="float">
        <img src="http://www.zhainanya.cn/skin/20142/img/logo.png" alt="">
        我是帅哥，好巧呀，我也是帅哥！
    </div>
</div>
则此时浮动元素宽度就是自适应父元素的200px宽度，最终的宽度表现也是200px

• 2、块状化并格式化上下文：块状化的意思是，元素一旦float的属性值不为none，则其display计算值就是block或者table。

设定值	计算值
inline	block
inline-block	block
inline-table	table
table-row	block
table-row-group	block
table-column	block
table-column-group	block
table-table	block
table-caption	block
table-header-group	block
table-footer-group	block

总结: 除了inline-table 计算是table外，其他全部都是block；

// 浮动让元素块状化
 span {
    display: block; /* 这是多余代码 */
    float: left;
}
span{
    float: left;
    vertical-align: middle; /* 这是多余代码 */
}
提示: 也不要指望使用text-align属性控制浮动元素的左右对齐，因为text-align对块级元素是无效的。

• 3、破坏文档流；
• 4、没有任何margin合并；

6.浮动的作用机制

1）float著名的特性表现：会让父元素的高度塌陷； 高度塌陷：让跟随的内容可以和浮动元素在一个水平线上；

<div class="box">
<div class="father">
       <img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3710470845,2924724193&fm=58">
    </div>
    <p class="animal">小猫1，小猫2，小狗1，小狗2，小猫1，小猫2，小狗1，小狗2...</p>
</div>

2）float与流体布局：利用float破坏css正常流的特性，实现两栏或多栏的自适应布局；

<style>
    .father{width:300px;margin:50px auto;border:1px solid #000;overflow: hidden}
    .father img{width: 80px;height:80px;float: left}
    .animal{margin-left: 90px;}
</style>
<div class="father">
<img src="https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=3710470845,2924724193&fm=58">
<p class="animal">小猫1，小猫2，小狗1，小狗2，小猫1，小猫2，小狗1，小狗2，小猫1，小猫2，小狗1，小狗2，小猫1，小猫2，小狗1，小狗4...</p>

多栏布局：左右固定，中间自适应;

<style>
    .box{width: 600px;height:60px;line-height:60px;margin:50px auto;border:1px solid #000;}
    .prev{float:left;height:60px;background-color: red}
    .next{float: right;height:60px;background-color: red}
    .title{margin:0 70px;text-align: center}
</style>
<div class="box">
<a href="#" class="prev">«上一章</a>
<a href="#" class="next">下一章»</a>
<h3 class="title">中间文字内容</h3>
</div>

7.浮动的天然克星clear

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

• clear: none 默认值，左右浮动来就来；
• clear: left 左侧抗浮动；
• clear: right 右侧抗浮动；
• clear: both 两侧抗浮动；
• clear属性只有块级元素才有效的；而::after等伪元素默认都是内联水平，这就是借助伪元素清除浮动影响时需要设置display属性值的原因；

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

8.清除浮动的方法

清除浮动的方法之给父盒子加固定高度
注意点：实际项目开发中，我们能不写高度就不要把高度写死，所以这种方式用的较少；

清除浮动的方法之clear：both；

// 具备两个条件:
// 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>

清除浮动的方法之overflow:hidden

overflow : visible： 对溢出内容不做处理，内容可能会超出容器
overflow : hidden： 隐藏溢出容器的内容且不出现滚动条
overflow : scroll： 隐藏溢出容器的内容，溢出的内容将以卷动滚动条的方式呈现
overflow : auto： 当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。
                  此为body对象和textarea的默认值
overflow的效果等同于overflow-x + overflow-y

清除浮动的方法之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;
}

9.overflow的多个作用

• 溢出隐藏，超出的部分隐藏不见
• 清除浮动产生的高度塌陷的问题
• 解决margin的重叠和传递问题
• 清除浮动对父元素产生的影响

10.BFC详解(面试题)

• BFC详解(面试题)

BFC的含义

• BFC（Block Formatting Context，块级格式化上下文）是一个重要的概念，它决定了元素如何与其兄弟元素以及父元素进行布局交互。BFC 是 W3C CSS 2.1 规范中的一个概念，用于描述块级元素在文档流中的布局方式。

BFC的表现原则

• 如果一个元素具有BFC，内部子元素再怎么翻江倒海、翻云覆雨，都不会影响外部的元素。

BFC布局规则

• 1.内部的盒子会在垂直方向，一个个地放置；
• 2.盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠；
• 3.每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如- 此；
• 4.BFC的区域不会与float重叠；
• 5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此；
• 6.计算BFC的高度时，浮动元素也参与计算；

生成BFC的元素

• 1.html根元素或其他包含它的元素；
• 2.float的属性不为none；
• 3.overflow为auto、scroll、hidden；
• 4.display为inline-block，table-cell，table-caption中的任何一个；
• 5.position为absolute或fixed；

BFC的用处

• 1.清除浮动
  • 当使用浮动元素（float）时，一个常见的问题是父元素塌陷，即父元素无法被其浮动的子元素撑开，导致高度为0。为了解决这个问题，我们可以利用BFC的特性来清除浮动
• 2.布局：自适应两栏布局
• 3.防止垂直margin合并
  • 两个相邻的块级盒子的垂直边距（margin）会发生重叠，但当它们属于不同的BFC时，这种重叠不会发生。

11.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

12.单行文本出现省略号的必备条件(面试题)

• width; 宽度
• white-space: nowrap; 禁止文字内容折行
• overflow: hidden; 超出部分溢出隐藏
• text-overflow: ellipsis; 文字以省略号的方式隐藏

13.多行文本出现省略号的必备条件(面试题)

• display: -webkit-box; 弹性盒模型
• -webkit-box-orient: vertical; 文字垂直排列
• -webkit-line-clamp 文字显示的行数
• overflow: hidden; 超出部分溢出隐藏