---
tags: CSS,
disqus: hackmd
---

# css的float|chrisHsiao

在使用這個語法的時候，很容易遇到的就是
子元素使用float
父元素的高度沒了

通常的解決方法為在父元素使用clearfix的方法

.clearfix:before, 
.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}

or

.clearfix:after {
  content: "";
  clear: both;
  display: table;
}

---

或者也可以在父元素加上 overflow: auto; 的語法

---

再不然就是在父元素的同層結構底下的tag補上clearfix的做法

<ul>
    <li>123</li>
    <li>456</li>
    <li>789</li>
</ul>
<p></p>

假設ul是父元素，就幫p補上一個 p{ clear:both;} 的css即可

---

http://www.iyunlu.com/view/css-xhtml/55.html

http://www.iyunlu.com/demo/enclosing-float-and-clearing-float/index.html
Demo頁面

---
###### tags: `CSS` `float` `clearfix`