和浮动元素相关的布局问题

<big>和浮动元素相关的界面设计 的 几点总结</big>

• 浮动元素会自动被转化为块级元素，相当于给元素设置了display：block；
• 块级元素独占一行，可以设置宽高以及边距，行内元素不会独占一行，设置宽高行距等不会起效。常见的块级元素为h1~h6,p,div,ul,table，常见的行内元素为span,a,input,select；
• 浮动元素如果和非浮动块级元素位置发生重叠，非浮动块级元素会置于浮动元素下面；
  浮动元素如果和非浮动行内元素位置发生重叠，非浮动行内元素会置于浮动元素的上面；
• 多个同方向浮动元素一般是按照流式布局，一行满了则自动换行；
  多个同方向浮动元素若是高度不一致的话，用float可能会产生意想不到的错误；
• 元素浮动后会脱离文档流，所以父元素是无法根据元素来自适应的，这时就需要clear：both的帮助；

clear:both的效果

根据前面的格式把后面的撑大；

---

注意css中各不同语句的出场顺序，下例中如果[class*='col-']定义到后面则不会得到想要的效果
summary：注意各标签之间的覆盖关系；

[class *="col-"]{
width: 100%;
}

@media only screen and (min-width: 768px){
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}

---