flex是flexble Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。 当我们为父盒子设置为flex布局以后，子元素的float（浮动）、clear（清除浮动）和vertical-align（垂直居中，margin: 0 auto是水平居中） ...
分类：
移动开发 时间：
2020-05-18 00:56:29
阅读次数：
107
1..伪类、伪元素 伪元素主要是用来创建一些不存在原有dom结构树种的元素，例如：用::before和::after在一些存在的元素前后添加文字样式等，这些被添加的内容会以具体的UI显示出来，被用户所看到的，这些内容不会改变文档的内容，不会出现在DOM中，不可复制，仅仅是在CSS渲染层加入。CSS3 ...
分类：
Web程序 时间：
2020-05-11 22:03:03
阅读次数：
84
一、浮动框可以向左或向右移动，直到外边缘碰到包含框或另一个浮动框边框为止。 常用浮动：float:left（向左）; float:right（向右）; 加上浮动之后 还要清除浮动： .cl::after{ content: ""; display: block; clear: both; } 二、 ...
分类：
Web程序 时间：
2020-05-09 18:40:18
阅读次数：
83
浮动元素后面加空div：空div会造成HTML代码冗余 设置父元素的高度：固定高度会降低元素可扩展 父级添加overflow属性：有下拉列表框场景不能用 父级添加伪类after：没有副作用，推荐使用 { 清除浮动 } ...
分类：
其他好文 时间：
2020-05-09 00:44:43
阅读次数：
203
在css中，我们有时会用到浮动属性。 简单来说，标准流文档中，块元素会占据整行来显示，比如div，h标签等。后面的标签会依次往后。 但是用了浮动之后，就会脱离文档流，意味着后面的标签可能会被挡住，引起布局混乱。因为浮动元素无法撑起父元素的高度（高度塌陷）。 那么又想使用浮动属性，又想让后面元素按标准 ...
分类：
其他好文 时间：
2020-05-05 10:36:33
阅读次数：
49
清除浮动原因 前端布局用的最多的是float：脱离文档流，浮动起来。浮动的框可以左右移动，直到遇到另一个浮动框或者遇到外边缘的包含框（BCF）。正是因为当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局，会造成父级元素高度坍塌。此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。当 ...
分类：
其他好文 时间：
2020-05-02 10:02:23
阅读次数：
54
浮动元素会脱离文档流，向左/向右浮动（float:left||right），直到碰到父元素或另一个浮动元素；可能会有覆盖普通元素的风险，若普通元素在浮动元素之后，就会被覆盖，因为浮动元素不占正常文档流位置，普通元素移动到浮动元素的位置，被浮动元素覆盖； clear清除浮动：clear属性不允许被清除 ...
分类：
其他好文 时间：
2020-04-25 09:14:10
阅读次数：
72
浮动元素的四大特性： 1.浮动的元素脱标（脱离标准文档流） 2.浮动的元素互相贴靠 3.浮动的元素由"子围"效果 4.收缩的效果 清除浮动的四种方法： 给父盒子设置高度 clear:both 伪元素清除法 overflow：hidden 伪元素清除法： div::after{ display: bl ...
分类：
Web程序 时间：
2020-04-21 15:29:42
阅读次数：
89
（1）给父级元素单独定义高度（height） （2）在标签结尾处加空div标签 clear:both .clear{clear: both;} <div class="box"> <div class="red">1</div> <div class="sienna">2</div> <div cl ...
分类：
其他好文 时间：
2020-04-17 18:33:41
阅读次数：
66
将 group 类添加到任何需要清除浮动的父级元素即可，这行代码兼容 IE8 及以上，目前国内不少大网站也在采取这种做法。 提示: 现在2020年，除了IE8需要兼容以外，很少项目会去兼容 IE6 和 IE7了, 而上面这行代码兼容IE8及以上，所以是可行的。 如果你需要兼容 IE7 或者 IE6， ...
分类：
其他好文 时间：
2020-04-06 19:05:41
阅读次数：
87
