标签：BFC 居中 元素 浮动 设置 position 属性
一、盒模型
1、概念：
在我们所熟悉的HTML页面中，每一个页面元素都可以看做一个盒子，由内容（content）、外边界区（margin）、填充区（padding）四部分组成。
2、盒模型分为两种：
标准盒模型：其总宽度 = width + margin + padding + border
怪异盒模型：总宽度 = width + margin （width已经包含了border和padding值）（IE浏览器中）
3、两种盒模型之间的互相转换
box-sizing:content-box; 将采用标准模式的盒子模型标准
box-sizing:border-box; 将采用怪异模式的盒子模型标准
box-sizing:inherit; 规定应从父元素继承 box-sizing 属性的值。
二、BFC布局
BFC：
即块级格式化上下文，BFC是一块独立的布局环境，保护其中内部元素不收外部影响，也不影响外部。
需要注意的是：本身BFC是一种css的布局方式，只是我们可以利用它来解决外边距折叠的问题，BFC并不是专门用来解决这个问题而创的
将一个box设置为BFC布局：
为box设置如下属性：
- overflow: auto/ hidden;
- position: absolute/ fixed;
- float: left/ right;
- display: inline-block/ table-cell/ table-caption/ flex/ inline-flex
原理：
- BFC内部的盒子，会在垂直方向，一个接一个地放置。垂直方向上也会发生边距重叠。
- BFC就是页面上的一个独立容器，容器里面的子元素不会影响到外面的元素，外边的也不会影响里边的。
- BFC的区域不会与float重叠。
- 计算BFC的高度时，浮动元素也被计算在内。
应用：
1、实现自适应布局 可利用BFC的这一原理实现两栏布局，左边定宽，右边自适应，不会影响对方
2、清除浮动：
可解决由于为子元素添加float属性而导致的父元素高度塌陷问题——为父元素添加overflow:hidden属性将其变为BFC布局
3、解决垂直边距重叠
三、清除浮动
1、为什么要清除浮动？
清除浮动主要是为了解决父级元素因为子级元素浮动而引起的内部高度为0的问题
如下：
给父盒子设置border属性，内部设置两个子盒子：big，small，此时弱未给big和small设置浮动，则他们会默认撑开盒子
此时如果给两个盒子添加商float属性，底部的盒子便会因为添加了float属性而浮动上来，此时父盒子因为没有设置高度，变成了一条线
清除浮动的方法（最常用的四种）
一、 额外标签法： 给谁清除浮动，就在其后额外添加一个空白标签 。
优点： 通俗易懂，书写方便。（不推荐使用）
缺点： 添加许多无意义的标签，结构化比较差。
给元素small清除浮动（在small后添加一个空白标签clear(类名可以随意），设置clear:both;即可）
二、 父级添加overflow方法： 可以通过触发BFC的方式，实现清楚浮动效果。必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点： 简单、代码少、浏览器支持好
缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。不能和position配合使用，因为超出的尺寸的会被隐藏。
注意： 别加错位置，是给父亲加（并不是所有的浮动都需要清除，谁影响布局，才清除谁。）
三、使用after伪元素清除浮动： :after方式为空元素的升级版，好处是不用单独加标签了。IE8以上和非IE浏览器才支持:after，，zoom(IE专有属性)可解决ie6,ie7浮动问题（较常用推荐）
优点： 符合闭合浮动思想，结构语义化正确，不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
缺点： 由于IE6-7不支持：after，使用zoom：1
四、使用before和after双伪元素清除浮动：（较常用推荐）
<style>
.father{
border: 1px solid black;
*zoom: 1;
}
.clearfix:after,.clearfix:before{
content: "";
display: block;
clear: both;
}
.big ,.small{
width: 200px;
height: 200px;
float: left;
}
.big{
background-color: red;
}
.small{
background-color: blue;
}
</style>
<div class="father clearfix">
<div class="big">big</div>
<div class="small">small</div>
</div>
<div class="footer"></div>
</div>
优点：代码更加简洁
补充
父级div定义 height： 父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点： 简单、代码少、容易掌握
缺点： 只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
四、定位position
position的含义
定位类型，取值类型可以有：static、relative、absolute、fixed、inherit和sticky，这里sticky是CSS3新发布的一个属性。
五个常用值：
1、position: static
是position的默认值，元素处于正常的文档流中，会忽略left、top、right、bottom和z-index属性。
2、position: relative
relative(相对定位)是指给元素设置相对于原本位置的定位，该并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不受影响。
3、position: absolute
absolute(绝对定位)是指给元素设置绝对的定位，相对定位的对象可以分为两种情况：
1) 设置了absolute的元素如果存在有祖先元素设置了position属性为relative或者absolute，则这时元素的定位对象为此已设置position属性的祖先元素。
2) 如果并没有设置了position属性的祖先元素，则此时相对于body进行定位。
4、position: fixed
设置了fixed属性的元素总是相对于body进行定位的。
5、inherit
继承父元素的position属性，但需要注意的是IE8以及往前的版本都不支持inherit属性。
6、sticky (吸顶效果)
position属性中最有意思的就是sticky了，设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。
五、元素水平垂直居中的实现
方法一：（最常用的）
简称：父相子绝，即为父元素设置相对定位，给子元素设置绝对定位，并使子元素向上以及向左位移自身宽高的一般（也可以用 transform:translate(-50%,-50%)）。
方法二：
父元素设置成弹性盒，子元素横向居中，纵向居中。
方法三：
父相子绝，子元素所有方向定位为0（top，left，right，bottom），margin设置auto自适应。
标签：BFC,居中,元素,浮动,设置,position,属性 来源： https://blog.csdn.net/Leslie_Cheung56/article/details/120187287
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。