標題：ul::after 防止 ul li 錯亂寫法
出處：A.PAO designSTUDIO BLOG
時間：Mon, 08 Jan 2018 12:21:17 +0000
作者：apao
地址：https://blog.apao.idv.tw/post/1257/

內容：
正常來說 HTML裡面，如果使用 li 做 float 功能時，就會讓 li 失去高度，為了不讓 li 失去高度，以及在之後的元素不會錯亂，需要有對應的程式寫法，如下： 
HTML 一般寫法
<ul>
  <li>★</li>
  <li>this is list comm.</li>
</ul>
<ul>
  <li>★</li>
  <li>this is list comm.</li>
</ul>

就會變成這樣：（灰框：div, 藍框：ul, 紅框：li）
點擊在新視窗中瀏覽此圖片
https://blog.apao.idv.tw/attachment.php?fid=2909

要正常，就要多寫一行div style -> clear: both 在每個 ul 後面，但是對輸出程式而言有點不乾淨。
<ul>...</ul>
<div style="clear: both;">

所以在CSS裡用 ul::after 來防制 float: 所產生的錯亂對輸出會乾淨一些。
CSS styleul::after{
content: "."; /*輸出文字*/
color: rgba(255,255,255,0.00); /*文字是透明的*/
clear: both; /*清除以上float規則*/
display: block; /*產生float功能所喪失的物件高度*/
height: 0px;/*再將content: 高度設定為0*/
}

正常畫面如下
點擊在新視窗中瀏覽此圖片
https://blog.apao.idv.tw/attachment.php?fid=2910

CSS style 參考body{ background: #FFFFFF; color: rgba(0,0,0,1.00); font-size: 13px;}
 div{ width: auto; height: auto; margin:0; padding:10px 0 10px 10px; border: rgba(0,0,0,1.00) dotted 1px;}
 ul{ display: block; list-style: none; margin: 0 0 10px 0; padding: 6px; border: rgba(0,0,255,1.00) dotted 1px;}
 ul::after{ content: "."; color: rgba(255,255,255,0.00); clear: both; display: block; height: 0px;}
 li{ float: left; display: block; width: auto; margin: 6px; padding: 0; min-height: 20px; border: rgba(255,0,0,1.00) dotted 1px;}
 li:first-child{ width: 12px;}
 li:last-child{ width: 92%;}
 a{display:inline-block;}

HTML 參考<div>
<ul>
  <li>★</li>
  <li>this is list comm.</li>
</ul>
<ul>
  <li>★</li>
  <li>this is list comm.</li>
</ul>
</div>



Generated by Bo-blog 2.1.1 Release