Css '；%'；而不是'；px和x27；拆下'；浮动'；影响

场景： 我们有一个'absolute'div包装

float:left

元素

使用

%

而不是

px

会使

浮动：左

在此场景中无效

---

勾选：

div.main\u按钮\u框

浮动运行正常，更改的是父元素的大小

---

父元素从子元素获取其大小。将子元素更改为使用百分比（即父元素的百分比）时，在计算父元素的大小时，将不再包含该子元素。父元素的宽度仅为另一个子元素的宽度，第二个子元素浮动在第一个子元素的下方，因为第一个子元素占据了父元素的全部宽度。

之所以发生这种情况，是因为您没有为

div.body

类指定任何宽度，而该类是绿色div的父元素。我刚刚为

div.body

指定了100%，并且工作正常

 div.body {
position: absolute;
bottom: 10px;
left: 20px;
width:100%;

div.main_informations {
    float: left;
    background-color:#49b7e5;
    padding: 20px 45px;

    h1 {
        font-size: 34px;
        font-weight: 300;
        color: white;
    }
}

div.main_button_box {
    //
    // Following 'width: 50px', try to change 50px with 50%.
    // 
    width: 50%;
    height: 160px;
    position: relative;
    float: left;
    background-color: green;

    span {
        position: absolute;
        bottom: 10px;
    }
}
}