【html、CSS-5】clearfix
阿新 • • 發佈：2018-05-19
pen 位置 round set TP back display lap 解決 
一、CSS全局應用
父標簽div下包含兩個子標簽div，當子標簽dvi全部向左float，此時父標簽設置的背景色是不顯示的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div_a{ background: red; } .div_a1,.div_a2{ float父標簽包含兩個左漂標簽，父標簽背景色不顯示: left; } </style> </head> <body> <div class="div_a"> <div class="div_a1">div_a1</div> <div class="div_a2">div_a2</div> </div> </body> </html>
如果想顯示父標簽的背景色，可以在子標簽中再加一個div，則代碼為：
<!通過在子標簽中添加div顯示父級的背景色DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div_a{ background: red; } .div_a1,.div_a2{ float: left; } .div_a3{ clear: both; }</style> </head> <body> <div class="div_a"> <div class="div_a1">div_a1</div> <div class="div_a2">div_a2</div> <div class="div_a3">div_a3</div> </div> </body> </html>
設想下假如一個項目中有很多這樣的父子div，需要顯示父級的背景色，那麽沒個父子塊都需要單獨設置樣式是非常繁瑣的事，那麽通過什麽方式解決呢？
首先：div:afer{content:"abcd"}這樣的方式可以在標簽的後面加上內容，實質上通過after加上的內容也作為一個內聯標簽存在的。
所以通過after的方式可以實現上面的效果：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div_a:after{ content: "abcd"; display: block; clear: both; } .div_a{ background: red; } .div_a1,.div_a2{ float: left; } .div_a3{ clear: both; } </style> </head> <body> <div class="div_a"> <div class="div_a1">div_a1</div> <div class="div_a2">div_a2</div> </div> </body> </html>通過after加內容
現在需要把加上的內容去掉，並且可以應用的其他父子模塊：
visibility: hidden 可以隱藏模塊，並且不占用位置，而display:none是隱藏並占據原來的位置
visibility用在after中還要加上height:0px 才能不占用位置，否則還占據abcd那一行的位置
定義通用模塊只需要在style中自定義一個名字叫clearfix的class就可以，.clearfix{}，然後如果有相同的模塊想用這種格式，只需要在標簽class的屬性值中添加clearfix就可以
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .clearfix:after{ content: "abcd"; display: block; clear: both; visibility: hidden; height: 0; } .div_a{ background: red; } .div_a1,.div_a2{ float: left; } .div_a3{ clear: both; } </style> </head> <body> <div class="div_a clearfix"> <div class="div_a1">div_a1</div> <div class="div_a2">div_a2</div> </div> </body> </html>通用格式
二、父類和子類元素hover樣式設置
當父類中包含子類，當鼠標放在父類元素上，父類元素樣式變化的同時子類也變化，這個樣式怎麽設置呢？
首先來看一個給父類增加邊框的實例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div_a:hover{ border: solid red 2px; } </style> </head> <body> <div class="div_a"> <div class="div_a1">aaaaa</div> <div class="div_a2">vvvvv</div> </div> </body> </html>父類鼠標懸停顯示紅色邊框
那麽鼠標放到父類上，子類樣式也變化呢？
只需要：選擇父類元素:hover 選擇子類元素{color:red}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .div_a:hover{ border: solid red 2px; } .div_a:hover .div_a2{ color: red; } </style> </head> <body> <div class="div_a"> <div class="div_a1">aaaaa</div> <div class="div_a2">vvvvv</div> </div> </body> </html>子類顏色樣式
【html、CSS-5】clearfix