CSS day_05(6.16) 高度坍塌问题、元素定位、文本处理、CSS样式重置

一、解决高度坍塌

1.父级元素自定义高度

当父级中子元素浮动，子元素就脱离文档流了，从而就不能支持父元素，父元素可以参照子元素自定义一个高度。

应用场景： 已知子元素的高度，并且子元素高度相同，最适合使用父级自定义高度，如：导航条 劣势：当子元素高度未知时，无法自定义父级高度

2.BFC保护

任何设置了BFC的元素，和浮动的元素相遇时，都可以实现"自动填充"的适应布局。 父元素设置了BFC结界后，子元素浮动，父元素高度会自动填充(自动适配) 解决父级高度坍塌 overflow:hidden/auto/scroll 触发父元素的BFC

应用场景： 子元素不会超出父级范围

3.clear属性清除子元素浮动给父元素带来的影响

clear属性专门用来解决float带来的高度坍塌问题 清除不是清除前面元素的浮动效果，而是清除因为子元素浮动对父亲造成的"不支撑"影响 使用clear的元素自己不可以浮动，要保持在文档流中替前面浮动走的兄弟元素收尾，支持父级 clear属性只对块级元素生效 方案：可以使用父元素的最后一个子元素，牺牲自我(宽度高度都不能有)，清除前面元素造成的坍塌 注意：clear清除的是前面的元素，后面的浮动元素不起效，所以要写在最后

劣势：不适合后台数据遍历插入

4.让父级元素成为同层元素

让父元素也通过float浮动脱离文档流，这时父级与子级就成为了同层元素 父元素脱离文档流还会产生问题，导致上层元素依然需要处理高度坍塌的问题 浮动的属性不会继承，此处方式尽量少用，因为会出现连带反应，还得解决父级的父级

5.使用伪元素解决高度坍塌

使用父元素的 ::after 模拟一个假孩子，而且 ::after 伪元素刚好在元素的最末尾 注意需要变成块级并且使用 clear:both

/* 给父元素最后生成一个空白子元素，变块级，清除前面兄弟浮动对父级造成的高度坍塌影响 */ .clearfix::after {     content: ''; /* 在父级最后生成一个空白的新的子元素 */     display: block;     clear: both; }

二、 元素的定位

1.定位的相关属性

定位position的五种值： 静态定位(默认)、相对定位、绝对定位、固定定位。粘性定位(新出的) 静态定位：position:static;默认值 元素是静态/文档流定位。 从上往下(块级)/从左到右(内联) 当前元素处于文档流中，只能依次排布，不能随意改变自己的位置 常用的三种：相对定位、绝对定位、固定定位

四个位置移动属性： top/bottom/left/right 值可以是长度值也可以是百分比 top : 正值向下移动 负值相反 bottom: 正值向上移动 负值相反 left: 正值向右移动 负值相反 right: 正值向左移动 负值相反 注意：不使用定位属性不能使用以上四个值让元素移动

层级 z-index 设定一个定位元素，当元素之间发生重叠时，z-index值大的元素就会覆盖z-index值较小的元素 z-index的值越大，层级越高 值为整数值，没有任何单位 默认值auto,可以看作层级0，z-index还可以取负值

2.相对定位 relative