解决方案——BFC
什么是bfc？
块级格式化环境bfc的开启方式？ 元素设置float浮动元素的display设置inline-block；元素设置绝对定位；overflow:hidden/auto（非默认值visible）;clear:both/left/right;——必须新增一个子元素（最后）bfc的问题？ //开启BFC实验 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box1{ background-color: pink; /*height: 200px;*/ width: 300px; /*开启BFC的方法*/ /*一、开启父元素的同方向浮动；那么父元素和子元素一起脱离了文档流， 父元素下面的同级元素依旧会上移，但是父元素也算是有了高度！这个高度和子集元素高度一致！*/ /*float: left;*/ /*二、设置父级元素为绝对定位或者固定定位，和设置浮动的效果一样。*/ /*position:absolute;*/ /*三、设置父级元素的display为incline-block，也就是将父级元素变成了行内块级元素？？？？？脱离文档流？？？ 父元素下面的同级元素会在原本文档流中的位置下些许下移，考虑是由于变成了块级元素导致两个块级元素导致？？？ 父级元素的高度被子级元素撑开了！ 设置成：display:block;就不行！ */ /*display:inline-block;*/ /*四、设置父级元素的overflow非默认属性： 父级元素会被子元素撑开,高度就是子元素的高度; 父元素下面的同级元素不会上移。*/ /*overflow:hidden;*/ /*五（未开启BFC，但是解决了高度塌陷问题！）、设置父元素的高度，这种方法照成的结果和开启overflow的结果一致；但是本质应该是不相同的。*/ /*height: 100px;*/ } /*六、给塌陷的父级元素的最后添加一个元素，使该元素清除浮动，呈现块级样式。也可解决高度塌陷问题！*/ /*.box1:after{*/ /*content: '';*/ /*display: table;*/ /*clear: both;*/ /*} */ .box2{ height: 300px; width: 300px; background-color: red; } .b1{ background-color: purple; width: 100px; height: 100px; float: left; } .b2{ background-color: green; width: 100px; height: 100px; float: left; } </style> </head> <body> <div class="box1"> <div class="b1"></div> <div class="b2"></div> <div class="clearfix"></div> </div> <div class="box2"></div> </body> </html>概念：css定位——表示的是某个元素在当前页面中的位置。 定位一定会有坐标轴的概念出现： 一个元素在当前页面的位置，其实就是一个坐标轴（X,Y） css定位就是将坐标值（x，y）转换成css中某个具体的属性使用。 定位的值：
static——默认值，表示静态定位； 注意——并没有坐标值的概念；absolute——表示绝对定位fixed——表示固定定位relative——表示相对定位偏移量：
偏移量——某个元素相对于初始位置的移动的距离；一个元素在页面中只有两种移动效果 - 垂直方向 - 水平方向提供四种偏移量 top-表示距离顶部的空间right-表示距离右边的空间bottom-表示距离下边的空间left-表示距离左边的空间偏移量的作用 同时使用top和left时——常用方式； top和left就是坐标轴中的坐标值的概念-使用bottom和right时当前元素定位在页面底部时——bottom；当前元素定位在页面右边时——right（至少可以使用left进行替换）。绝对定位：
开启方式——position：absolute;（非static即可，默认值：static）特点： 绝对定位的元素脱离文档流；绝对定位的元素呈现块级效果；只是开启绝对定位，而不设置坐标值的话，位置不会发生变化。定位效果： 绝对定位的元素的父元素是< body>，相对于页面定位；绝对定位的元素不是父元素< body>时 如果父元素开启定位，则相对于父元素；如果父元素不开启定位，则依旧相对于页面。固定定位——fixed 固定定位时绝对定位的一种特殊定位； 固定定位值相对于浏览器窗口的定位
相对定位——relative
注意：
开启相对定位的元素没有脱离文档流；开启相对定位的元素并不是相对于页面定位的，而是相对于当前元素在文档流中的位置的。当top和left的值为0时，相对定位元素并不会发生变化；父元素是否开启定位，并不会影响子元素。