1。浮动元素有什么特点？对父容器、其他浮动元素、普通元素、文本有什么影响？什么是浮动元素？有什么特点？所谓浮动元素就是设置了浮动属性的元素。它的特点是：1.浮动框可以左右移动，直到它的外边缘接触到包含框（它的父元素）或者另一个浮动框。这个属性意味着浮动元素可以像一个内联元素的样式一样水平排列，但是如果高度设置有问题，那么多个浮动元素就会“卡”在水平排列中。一个简单的测试：框3被框1卡住。2.浮动框不在文档的正常流中，文档正常流中的块框无法感知浮动框的存在；3.CSS中任何元素都可以浮动，浮动的元素会生成一个块级框，而不管元素本身。对父容器、其他浮动元素、普通元素、文本有什么影响？浮动的本意是为了实现文字的环绕效果。-[简单测试1](http://js.jirengu.com/godicuyewi/2/edit)根据测试可以看出：-对于文档正常流中的块就其而言，它无法感知浮动元素的存在，所以实际效果是浮动元素覆盖了部分块级元素。当然，也可以说部分块级元素钻在浮动元素下面；包含的文本知道浮动元素的存在（默认情况下），因此环绕浮动元素。-除了文本，像图片（图片一般被认为是行内元素），一些表单元素（比如单行文本域，单行密码域，单选按钮，多选按钮，多行文本域,下拉菜单,上传字段,隐藏字段,提交按钮,普通按钮）这些线元素，能不能生成能识别浮动元素的线型框？这是要测试的。....-[简单测试2](http://js.jirengu.com/viyodokeke/4/edit)-如果父元素包含浮动元素，正如预期的那样，浮动元素应该在父元素的框架内向左或向右浮动浮动，但是，实际测试发现父元素并没有被浮动元素拉伸，父元素的高度塌陷了。2、清浮是什么意思？如何清除浮动？两种以上的方法清除浮动是什么意思？从测试2可以看出，浮动元素会脱离文档的正常流向，而其父容器处于正常流向，因此存在父元素高度塌陷的问题。如果我们想让浮动元素浮动在它的父容器内，我们需要清除浮动。浮动元素之所以能够浮动，是因为它周围的线框被缩短了，为浮动元素留出了空间。浮动的原理简单说一下，清除浮动就是恢复浮动元素周围的线框原来的长度，但是浮动元素是客观存在的。存在（虽然不在正常的文档流中），占用一定的空间，为了恢复原来的长度，linebox应该向下或向上移动，直到左右没有浮动元素（即足够的清空空间在浮动元素的上方或下方添加)，这将恢复原始长度。如何清除浮动？清除浮点数主要有两种方式，即使用clear属性，或者BFC清除浮点数。3、定位方式有几种，如何实现定位，参考点有哪些，使用场景有哪些？W3c学校的一些参考资料中css中有3种定位机制，分别是普通流、绝对定位和浮动。通过position可以选择四种定位方式：静态元素框正常生成。块级元素生成一个矩形框作为文档流的一部分，而内联元素创建一个或多个行框放置在它们的父元素中。相对元素框偏移一定距离。该元素保留其未定位的形状，并保留其最初占据的空间。绝对元素框完全从文档流中移除并相对于其包含块定位。包含块可以是文档中的另一个元素或初始包含块。元素先前在正常文档流中占据的空间被关闭，就好像该元素不存在一样。定位元素以生成块级框，而不管它最初在正常流中生成的框类型。固定元素框的行为类似于将位置设置为绝对位置，但它的包含块是视口本身。提示：相对定位实际上被认为是正常流定位模型的一部分，因为元素的位置是相对于它在正常流中的位置的。1、普通流，就是设置元素的默认位置；2.相对定位，即相对于元素在文档流中的默认位置的偏移；3.绝对定位，即相对于最近的包含的祖先元素，如果元素没有最近的祖先元素，则相对于原始包含块。4、z-index的作用是什么？如何使用?z-index属性设置元素的堆叠顺序。具有较高堆叠顺序的元素始终位于具有较低堆叠顺序的元素之前。注意：元素可以有负的z-index属性值。注意：Z-index仅适用于定位元素（例如position:absolute;）！说明此属性设置定位元素沿z轴的位置，z轴定义为垂直延伸到显示区域的轴。如果为正，则离用户更近，如果为负，则离用户更远。值和含义是默认的。堆叠顺序等于父元素。number设置元素的堆叠顺序。inherit指定z-index属性的值应该从父元素继承。5.position:relative和负margin都可以抵消元素的位置吗？两者有什么区别？简单测试一下：绝对定位有一个偏移，负边距也抵消了两者的区别：position:relative;只是相对于其原始位置发生的偏移，不会影响元素在其他普通流中的位置。margin：除了偏移元素本身，还会影响正常流中的其他元素。6.什么是BFC？如何生成BFC？BFC做什么？BFC的例子是什么？BFC英文全称是blockformattingcontext，中文翻译是block-levellanguageformattingcontext（我觉得这个翻译太直译了，还是用意译比较好），在W3C官方有介绍css文件。浮动、绝对定位元素、不是块框的块容器（例如内联块、表格单元格和表格标题），以及具有“溢出”而不是“可见”的块框（除非该值已被传播到视口）为其内容建立新的块格式化上下文。在块格式化上下文中，框从包含块的顶部开始一个接一个地垂直放置。两个同级框之间的垂直距离由“边距”属性确定。块格式化上下文中相邻块级框之间的垂直边距折叠。在块格式化上下文中，每个框的左外边缘接触包含块的左边缘（对于从右到左的格式，右边缘接触）。即使存在浮动也是如此（尽管框的行框可能会由于浮动而缩小），除非框建立了新的块格式上下文（在这种情况下，框本身可能会由于浮动而变窄）。有关分页媒体中分页符的信息，请参阅允许分页符部分。翻译过来就是：浮动元素和绝对定位元素，非块级框（如inline-blocks、table-cells、table-captions）的块级容器，溢出值不是“可见”级别的块级框，将为它们的内容创建一个新的BFC（块级格式化上下文）。在BFC中，盒子从顶部开始一个接一个地垂直排列，两个盒子之间的垂直间距由它们的边距值决定。决定。在BFC中，两个相邻块级框的垂直边距会导致折叠。在BFC中，每个框的左外边缘（margin-left）接触容器的左边缘（border-left）（或右到左格式的右边缘）。翻译参考BFC是如何生成的？可以看出官方的解释比较晦涩，所以可以简单的理解为BFC是一种独立的布局模式。当一个元素满足以上特征时，就会为该元素及其内容创建一个独立的BFC布局模式。布局方式只对创建的元素及其内容有影响，对其他外部元素没有影响。简单来说，在元素上设置如下属性即可生成BFC：float:left|正确的;（浮动元素）溢出：隐藏|汽车|滚动;（溢出值不可见）display:table-cell|表格标题|行内块；（非块级元素）position:absolute|固定的;(绝对定位元素)-BFC的作用(特点)是什么？1.BFC会防止垂直边距（margin-top,margin-bottom）塌陷。根据BFC的定义，只有属于同一个BFC，两个元素才能垂直重叠。这包括相邻元素、嵌??套元素，只要它们之间没有遮挡（如边框、非空内容、padding等），就会发生边距重叠；因此，要解决margin重叠的问题，只要让它们不在同一个BFC中即可，但是对于两个相邻的元素来说，意义不大，没必要给它们加壳，但是很有必要对于嵌套元素，只要将父元素设置为BFC即可。这样子元素的外边距就不会和父元素的外边距重叠；2、BFC不会重叠浮动元素；3、BFC可以包含浮动元素；我们可以利用BFC的第三个特性来“清浮”，这里其实说清浮已经不合适了，应该说是包含浮。也就是说只要父容器构成一个BFC。BFC的问题还有待研究，目前是一知半解！！！！！！！！7、什么情况下margin会合并？如何合并？如何防止相邻元素的边距塌陷？举一个父子边距合并的例子在CSS中，两个相邻框（可能是兄弟或祖先）的边距可以合并为一个边距。这种组合边距的方式称为折叠，因此组合边距称为折叠边距。当两个框的外边距均为正时，折叠边距取边距较大的那个；当两个框的外边距均为负时，折叠边距取外边距绝对值较大的一个；当一个盒子的外边距为正负时，折叠后的外边距取两个外边距值之和。产生折叠的必要条件：边距必须相邻！根据w3c规范，两个边距必须满足以下条件：1.必须是常规文档流中的块级框（非浮动和绝对定位），并且在同一个BFC中。2.没有linebox，没有clearance（间隙），没有padding和border来分隔它们3.它们都属于垂直方向上相邻的margin，可以是以下任意一种情况：margin-bottomofthe元素和下一个常规文档流的兄弟元素的margin-topheight为auto，该元素的margin-bottom和常规文档流的最后一个子元素的margin-bottom高度为0，最小高度为也为0，不包括常规文档流的子元素，并且不创建新BFC的元素的margin-top和margin-bottom之上的条件隐含了以下规则：1.创建新BFC的元素（例如浮动元素或“可见”元素以外的“溢出”值）不会与其子元素的边距一起折叠浮动元素不会与任何元素（包括其父元素和子元素）的边距一起折叠2.绝对定位元素不c与任何元素的边距折叠inline-blockelements不与任何元素的边距冲突3.常规文档流元素的margin-bottom和它的下一个常规文档流兄弟的margin-top创建一个折叠，除非有他们之间的间隙。4.常规文档流元素的margin-top与其第一个常规文档流子元素的margin-top折叠，前提是父元素不包含padding和border，且子元素不包含clearance。5.如果父元素不这样做，“高度”为“自动”且“最小高度”为“0”的常规文档流元素的底部边距将与其最后一个常规文档流子元素的底部边距一起折叠不包含填充和边框，子元素的边距底部不会与包含间隙的边距顶部折叠。6.一个不包含border-top,border-bottom,padding-top,padding-bottom,并且'height'为0或者'auto','min-height'为'0'的常规文档流元素,里面也不包含行框（linebox），它自己的margin-top和margin-bottom会被折叠起来。以上内容转自文章出处。简单测试下parent-childmarginmerging8.代码部分代码1代码2代码3代码4
