1.清除浮動
老生常談的話題，面試經常問的問題
解決方法有很多種，這里講幾種
1.1 子元素加clear

復制代碼代碼如下:
<div class=”news”>
<p>Some Text</p>
<br class=”clear”>
</div> .news{
background: gray;
border: solid 1px black;
}
.news p{
float: right;
}
.clear{
clear: both;
}

這種方法可以擴展出很多種不同的方法，如JS動態添加，設置一個公共的類然后添加，或者直接就是一段內聯style的html代碼，但是原理都是用到了clear這個屬性
1.2 父元素BFC化
HTML文檔流是盒子模型的，BFC就是組織盒子模型的形式，當元素的類型如標簽(p和span)不一樣的時候，其表現出來的樣子是不一樣的。
所以BFC就是讓這個元素看起來像盒子的一種代稱，BFC全稱 Box Formatting Context。CSS2.1還有IFC,即Inline Formatting Context。
BFC布局規則：
•內部的Box會在垂直方向，一個接一個地放置
•Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊
•每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此
•BFC的區域不會與float box重疊
•BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此
•計算BFC的高度時，浮動元素也參與計算
產生BFC的條件：當然普通的塊級元素默認呈現塊級的樣子，但是通過CSS我們可以可以讓某些元素呈現BFC的形態（塊級形態）
1.根元素(html元素)
2.float不為none的元素(包括left,right,inherit三個，因為float只有四個值)
3.position為absolute或fixed
4.display為inline-block,table-cell,table-caption,flex,inline-flex
5.overflow不為visible(包括hidden,scroll,auto,inherit四個值)
如下面的為在父元素加float屬性使其BFC化

復制代碼代碼如下:
<div class=”news”>
<p>Some Text</p>
<br class=”clear”>
</div> .news{
background: gray;
border: solid 1px black;
}
.news p{
float: right;
}
.clear{
clear: both;
}

2.透明度
2.1 opacity
熟悉CSS3的應該很清楚，不就是opacity嘛。但是在那個沒有支持opacity的年代又是怎么做的呢。
opacity屬性設置元素的不透明級別。不會被繼承，值為0.0(完全透明)到1.0(完全不透明)。
不會繼承父元素的屬性，但是可以設置inherit來繼承父元素的值

復制代碼代碼如下:
p{
opacity: 0.5;