一、 BFC的概念 BFC——block formating context的缩写，中文译为"块级格式化上下文" 二、如何触发BFC 1.设置float除none以外的值(left,right) 2.设置overflow除visible以外的值(hidden,auto,scroll) 3.设置dis ...
分类：
其他好文 时间：
2018-01-12 22:42:12
阅读次数：
153
一、margin塌陷 1）垂直兄弟元素间距取较大margin值. 2）父子元素，子元素的margin-top值会作用在父元素上。解决方案：a）父元素加overflow:hidden;b）父元素加padding;c）父元素加border; ...
分类：
Web程序 时间：
2018-01-11 15:36:27
阅读次数：
158
引出问题： 这里没有给最外层的div 设置高度，如果它里面的元素不浮动的话，那么这个外层的高是会自动被撑开的。但是当内层元素浮动后，就出现了一下影响： 1. 使用额外标签法 这是早期普遍使用的方法，但是对于有代码洁癖的人来说，解决的不够完美 2.使用 :after 为元素 原理：他是利用:after ...
分类：
Web程序 时间：
2018-01-07 20:20:13
阅读次数：
204
float的设计初衷仅仅是：为了文字环绕效果 float的包裹与破坏 包裹：收缩、坚挺、隔绝（BFC） 破坏：父元素高度塌陷 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Layout</title> <style> .b ...
分类：
Web程序 时间：
2017-12-30 12:06:47
阅读次数：
218
浮动“塌陷” float参见： http://www.cnblogs.com/bigtreei/p/8110090.html http://www.w3school.com.cn/css/css_positioning_floating.asp ·使用浮动(float)的一个比较疑惑的事情是他们怎么 ...
分类：
其他好文 时间：
2017-12-25 20:56:33
阅读次数：
425
1.float元素有继承属性：inherit. 2. 3. 此时在文档中显示。因为设置了浮动属性，会让span元素脱离标准文档流。 4. 使用浮动，可能出现的问题：①若父元素未设置高度，则父元素会塌陷，没有高度 ②网页中的临近元素出现异位。 问题解决：①给父元素设置高度 ②给父元素也设置浮动属性 ③ ...
分类：
其他好文 时间：
2017-12-23 23:06:21
阅读次数：
130
第一种情况： 已知两个宽和高均为100px，margin均为20px的div垂直排列，现象如下图所示： 当设置css1的margin-bottom：40px；或者css2的margin-top：40px时，现象如下图所示： 结论： 只有当两个垂直排列的盒子的垂直外边距挨在一起时会产生合并问题，此问题 ...
分类：
Web程序 时间：
2017-12-14 19:22:45
阅读次数：
154
1float浮动的属性值 left:向左浮动 right:向右浮动 2、当父元素未浮动，子元素浮动时，就会造成浮动塌陷 实例： 父元素： 子元素： 3、浮动的影响 在允许的空间并排显示，如果空间不够，会自动换行 改变块级元素占据一整行的特性，去掉多余的空间，把宽度缩成本身的内容的宽度或者设置的宽度 ...
分类：
其他好文 时间：
2017-12-04 22:17:39
阅读次数：
233
浮动： 使元素推理文档流，按照指定方向发生移动； 遇到父级边界或者相邻的浮动元素会停下来； 浮动的特性： 1，块元素一行显示多个； 2，内联元素支持宽高； 3，没有设置宽度时由内容撑开宽度； 4，脱离文档流； 浮动的破坏性： 浮动元素脱离文档流后，导致父级元素高度塌陷。父级元素无法包裹住子级浮动元素 ...
分类：
其他好文 时间：
2017-11-26 11:02:38
阅读次数：
146
css中的float： float:left 左浮动 float:right 右浮动 float:none 不浮动 float:inherit 继承浮动(继承父元素浮动属性，如果父元素无浮动属性，inherit失效) 浮动产生哪些问题：1.父元素塌陷，没有高度。2.网页中的临近元素出现异位 清除浮动 ...
分类：
Web程序 时间：
2017-11-23 08:13:00
阅读次数：
210
