整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
素显示模式
display : block | none | inline | inline-block
display 属性用来设置元素的显示方式。
block块对象指的是元素显示为一个方块，默认显示状态下，它将占
据整行，其它的元素只能在下一行显示。
inline行间对象与block刚好相反，它允许其它元素在同一行显示。
none隐藏对象
元素的浮动
float : none | left | right
float 属性用来控制元素是否浮动显示。
left向左浮动
right向右浮动
none不浮动
浮动的时候元素的显示属性也变化了 变为 "行内元素"
Css 布局
div 标签：
<div> </div>
div 与其它标签一样，也是一个XHTML所支持的标签。
div 是XHTML中指定的，专门用于布局设计的容器标签。
在css布局方式中，div 是这种布局方式的核心对象，我们的页面排版不再依赖于表格，仅从div的使用上说，做一个简单的布局只需要两样东西：div 与 css.因此我们称这种布局方式为 div + css 布局。
<div id="header">页面头部</div>
<div id="content">
<div id="left"></div>
<div id="right"></div>
</div>
<div id="footer">页脚</div>
盒模型就是指CSS布局中的每一个元素，在浏览器的解释中，都被当作一个盒状物。
对我们来说，只需要理解元素在页面中所占据的位置。
ie6 / ie7 / firefox 的最终宽度 =左边框宽 + 左内边距 + 宽度 + 右内边距 + 右边框宽
文档流
文档流是浏览器解析网页的一个重要概念，对于一个XHTML网页，body 元素下的任意元素，根
据其前后顺序，组成了一个个上下关系，这便是文档流。浏览器根据这些元素的顺序去显示它
们在网页中的位置。
文档流是浏览器的默认显示规则。
深入浮动
浮动的目的
就是要打破文档流的默认显示规则。如果要让元素按照我们的布局要求进行显示。这时就要利
用float属性。
1.任何申明为 float 的元素自动被设置为一个"块级元素"。
2.在标准浏览器中 浮动元素脱离了文档流 ，所以浮动元素后的元素会占据浮动元素本来应该
所处的位置。
3.如果水平方向上没有足够的空间容纳浮动元素，则转向下一行 。
4.文字内容会围绕在浮动元素周围 。
5.浮动元素只能浮动至左侧或者右侧 。
清除浮动
clear : none | left | right | both
none :默认值。允许两边都可以有浮动对象
left :不允许左边有浮动对象
right: 不允许右边有浮动对象
both :不允许有浮动对象
程序员web前端学习路线分享CSS浮动-清除浮动篇，为什么要清除浮动
这里所说的清除浮动，并不是不要浮动了，而是清除浮动与浮动之间的影响。那么到底会有什么影响呢？
1．高度塌陷
举个例子我们看一下。
我们在这里设置了div0是外容器，div1是内部容器，div1因为设置了宽高是100，所以显示的时候就是一个橙色的100*100的方块，但是div0仅设置了背景色，因为div特有的独占一行，宽度会自动100%，高度被内部容器div1撑开了，撑开的高度是100像素，所有看到一个绿色高100像素，宽度100%的容器
现在我们给div1设置浮动
这时候我们发现div0这个外容器没了，看不见了。。别急，我们在div0里打一些字看看
我们发现aaa这些文字出来了，环绕在橙色方块周围了，这个原因在浮动中我们已经讲解了，而且我们也发现绿色的容器也出来了，但是它的高度仅仅是文字的行高。这就说明，内部的橙色块设置浮动后，它的父级容器绿色块就不知道橙色容器的高度了，因此绿色容器的高度变成了0，写入文字后，绿色容器重新被撑开高度才可以看到。我们把这种情况称为高度塌陷。
我们其实是希望一个容器中的内容不断的撑开容器的高度，这样我们后续的内容就可以紧贴在上面了，而网页中的内容并不是都是静态的，很多都需要每天更新，更新的内容多少，图片高度，都不相同。那么后面的东西想要紧贴上面的内容，上面内容的高度就不能设置一个固定数值，否则很多数据的时候放不下。如果不设置高度，一旦设置浮动后，就会出现高度塌陷。丢失了高度后，页面后续的内容就会插在上面内容的底部，页面就会错乱，因此我们就需要做清除浮动来解决这个问题，最终做到即使使用浮动，外容器也会因为内容的多少自动撑开高度，不会高度塌陷。
margin padding设置值不能正确显示
2．Margin和padding属性值不正确
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。
要来解决这个问题，我们就必须来认识一下BFC
什么是BFC
要来理解BFC，先介绍一下Box和Formatting Context
Box 是 CSS 布局的对象和基本单位， 简单来说页面就是由Box组成，元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。
1、block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block formatting context；
2、inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；
3、run-in box: css3 中才有， 这儿先不讲了。
Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
BFC布局规则：
（1）内部的Box会在垂直方向，一个接一个地放置。
（2）Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
（3）每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
（4）BFC的区域不会与float box重叠。
（5）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
（6）计算BFC的高度时，浮动元素也参与计算
瞧，最后一条就是我们需要利用的了，我们只需要利用BFC就可以解决浮动后外容器高度塌陷的问题
如何生成BFC
1. 根元素是BFC模式
这种不能考虑，因为都不是根元素
2. 设置高度
显然也是不可以的。
3. float属性不为none
本来就要设置浮动的。所以也不考虑
4. position为absolute或fixed
这样设置后，就失去浮动的意义了。因此也不使用
5. display为inline-block, table-cell, table-caption, flex, inline-flex
虽然可以开启，但是导致父元素原有宽度丢失
6. overflow不为visible
这种方法副作用比较小，但是还是有问题的。比如overflow设置为hidden，这个不行，内容的高度是撑开的宽度也不能确定。设置为scroll，会出现右边和下边的滚动条宽度
设置为auto最合适，不过，如果里面的内容使用了定位，并且超出去就会出现滚动条。所以只能保证内容不能有定位。
Clear:both
清除：两者间，顾名思义就是清除浮动
我们看到如果要使用clear:both，就需要给高度塌陷的容器里面最后追加一个div，并且给这个div设置为clear：both，我们发现这种使用方法比较麻烦，每次设置都需要最后增加div。
因此我们做了一个修改
<!DOCTYPE html>
我们知道css中最重要的就是浮动了，一张网页结构布局，用的最多的就是浮动了，现在大多数的网站网页结构都是浮动布局了，不像早些年的表格布局。所以学好浮动对我们的开发很重要。
浮动是什么？可能很多人的理解都不一样，我们来看看w3c对浮动的解释是什么
大多数小伙伴听得最多的可能就是浮动流，下面我们就来讲讲什么是浮动流以及清除浮动。
首先，我们知道，在一张网页中的正常布局流向（排列方式）都是从左到右，从上到下的方式排列。这个我们称之为标准文档流。那什么是浮动流呢？
浮动浮动浮动 ==> 因为有个浮字，我们可以理解为浮起来了一样。就好比标准文档流在地下排流，浮动流在天空上排流。简单看个例子。
这是两个正常排列的div，div独占一行，就不用多说了吧。然后我们给小的方块加一个浮动
然后我们再看效果
然后我们就看到大方块在小方块下面，因为小方块跑天上去了，它就不占据原来的位置，会把那个位置空出来，所以大方块会窜上去，就看起来两个方块重叠了。
在看另外一个例子，子级浮动，父级高度撑不开的问题，这也是浮动带来的一个不好的影响，平常写代码的时候会经常遇到这个。
一个ul标签，下面两个li标签，然后给ul加一个边框 便于观看。
保存运行看下正常效果
然后我们给li标签浮动
效果如下
这下我们看到ul的高度没有了，上下边框紧紧挨着，这就是刚刚上面说的浮起来的状况，因为子级li标签浮动起来了，它不占据原来的位置，它已经在天上了，所以它的父级ul标签包不住它，撑不起来高度，才会产生这种状况。
那我们要怎么解决这种现象呢。就是清除浮动。
大致分为4种方案：
1、在并列的子元素，最后加一个元素，给他加clear：both
2、给父子加一个class： clearfix
.clearfix::after{
content: '';
clear: both;
display: block;
}
3、让父级触发BFC效果
position:absolute
display:inline-block
float：left|right
overflow：hidden
4、如何浮动的父级本身就是浮动元素吗，那么不用清除浮动了
咱们就来给父级触发BFC效果看一下。
看效果
现在父级就把子级包裹住了，高度也有了。
有什么问题可以点一下关注，私信小编。
*请认真填写需求信息，我们会在24小时内与您取得联系。
