2 CSS布局秘籍-6脉神剑( 四 ) _生活百科

文章插图
清除浮动脱离正常的文档流，并不会占据正常文档流的位置，如果一个父元素下面都是浮动元素，或正常元素高度低，则会导致父元素的高度坍塌。从而使得后面的正常元素布局出现不希望的情况，常见三种清除方法：
方法说明? 触发父元素为BFC overflow: hidden; 比较常用的方式，缺点是文档超过区域大小后，内容会被隐藏。display: flow-root;，新特性，创建无副作用的BFC 。? 设置父元素高宽明确设置父元素的高度、宽度，缺点是不能自适应。? 父级添加伪元素::after，并清空clear::after中添加一个空的块级盒子，并清除其浮动。clear: both;使左右两边都不允许浮动元素，让后面的非浮动元素的边界移动到所有浮动元素的外边界下方，就强行撑开了高度。注意，这里并没有产生BFC ，详情参考 MDN-clear

/* 恢复父元素上的BFC */.parent {overflow: hidden;}/* 在父元素上使用清除clearfix：clear + 伪元素::after实现 ， 附加一个空的块元素并清除 */.clearfix::after {content: "";display: block;clear: both;}

不理解float为什么要这么设计？？？坑

04、position定位position 可精准设置盒子的位置，正常布局流中，元素的position默认值为 static 。使用其它值可实现元素不同的定位，结合偏移top, bottom, left, right使用，如果不设置偏移，则元素还是原来的位置。

定位并不是一种常规的布局方式，主要用于一些特殊位置的实现。

属性/值描述值/示例position设置元素定位方式?static静态定位，就是正常文档流位置，所有元素的默认值，此时设置偏移无效position: static;?relative相对定位 (relative /?rel?t?v/)，在文档流的基础上，相对于自己位置的偏移定位，位置保留。不影响其他元素，可能会和其他元素重叠。position: relative;?absolute绝对定位 (/??bs?lu?t/) ，脱离文档流，就像单独一个图层中，不干扰其他元素布局。相对于最近一个非**static**定位的父元素（直到根元素），常用于弹出层（消息、菜单）position: absolute;?fixed固定定位，和absolute基本一样，脱离文档流，定位的对象是浏览器视口，可实现不滚动的固定内容。position: fixed;?sticky粘性定位 (sticky/?st?ki/ 黏性的)IE，_静态定位+固定定位 _fixed的结合体，先静态定位，当元素满足预定条件时（达到相对于视口的定位），进入固定定位fixed模式。注意：sticky 元素会“固定”在离它最近的一个拥有“滚动机制”的父元素上position: sticky;top顶部偏移：元素的上外边距边界与其包含块上边界之间的偏移，只用于定位top: -50px;bottom底部偏移，只用于定位。若与top同时设置，都会生效，如有固定height则top优先生效bottom: 10px;left左侧偏移，只用于定位right右侧偏移，只用于定位z-indexz轴坐标，用于元素上下层叠顺序控制，默认auto=0 ，值越大层级越高。z-index:-1;

<style>.btn-top{display: block;font-size: 30px; font-weight: bold;width: 50px; height: 50px; line-height: 50px;border-radius: 50%;opacity: 0.5;text-align: center; text-decoration: none;background-color: #eeb2cb;/* 定位 */position: fixed;bottom: 10px; right: 10px;}.btn-top:hover{opacity: 1; background-color: coral;}</style><a href="https://www.huyubaike.com/biancheng/#" class="btn-top" title="回到顶部"></a>

文章插图

? 回到顶部字符：

05、表格布局(display:table)table 表格布局和<table>元素类似，实现一个行列工整的布局表格。表格的布局可以用在非表格内容上，使用display: table、table-row、table-cell和相关属性在非表元素上，可用于表单form的内容布局（好像并不好用-不能跨行？）。
属性值描述display: table表格布局display: table-row类似表格的<tr>display:table-row-group类似表格的<tbody>display: table-cell类似表格的单元格<td>vertical-align单元格内容垂直对齐，可应用于垂直居中? 表格布局-表单