今天：

师兄提示说不用flex也行，后续任务会学到，那么就开始搜索其他的方法做到自适应。 

首先查到的是用比例控制宽度自适应，不设置绝对宽度。

在网页代码头部（head）里面加入一行代码：

viewport元素（视窗）

<meta name="viewport" content="width=device-width, initial-scale=1.0">

查了下可以继续使用浮动元素，清除浮动，于是我在我的代码大盒子里加了border，此时发现子元素都没有包含在父元素里

一般浮动是什么情况呢？一般是一个盒子里使用了CSS float浮动属性，导致父级对象盒子不能被撑开，这样CSS float浮动就产生了。

简单地说，浮动是因为使用了float:left或float:right或两者都是有了而产生的浮动。

浮动产生负作用

1、背景不能显示
由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。

2、边框不能撑开

如上图中，如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。

3、margin padding设置值不能正确显示
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。

于是尝试清除浮动，按照搜索到的在原有代码上添加了一些子元素，

但是产生的问题就是盒子又没了。尝试添加多几个盒子后，父元素的高度确实被子元素撑开了，对照了一下网上的代码，原来是引用css时代码没添加完整。这是个基础错误。

<div class=box>

<div class="left">1</div>

<div class="right">2</div>

</div>

后续添加完整后，盒子是左右分别排列了，但是又产生了浮动父元素又失去了高度。

方案之一是在父元素添加一个高度属性，

但是高度设置不对又会撑破父元素这与我想要让内容撑开父元素不符。

方案二是添加一个css元素：clear:both清除浮动

为了统一样式，我们新建一个样式选择器CSS命名为“.clear”，并且对应选择器样式为“clear:both”，然后我们在父级“</div>”结束前加此div引入“class="clear"”样式。这样即可清除浮动。

尝试删掉父级元素的高度，添加了一个clear属性后，父级元素的高度确实被撑开了

尝试添加多个盒子，结果确实浮动清除了。 大盒子有确实被撑开了。

方案三：父级div定义 overflow:hidden
对父级CSS选择器加overflow:hidden样式，可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。

为什么加入overflow:hidden即可清除浮动呢？那是因为overflow:hidden属性相当于是让父级紧贴内容，这样即可紧贴其对象内内容（包括使用float的div盒子），从而实现了清除浮动。

尝试添加，效果如方案二一般，但是代码简洁了很多。

接下来就是继续如何让九宫格达到自适应。

尝试以全部盒子添加float：left达到九宫格效果，但是此时盒子又从新排列到了左边。以及高度依然没有自适应。

生活琐碎，余下的留待明天解决。

明天：自适应高度，把九宫格固定到各个位置，任务下一步。

问题：子元素尝试添加了height：auto，和height：20%之类的，但是高度并没有获得相应变化，宽度的33%倒是变化了。

父元素没设定高度，只设定了一个100%width，只添加了一个height：auto。