iT邦幫忙

0

前端工程學習日記第8天

有些學生提到還要多一個 clear div 來清除會把 HTML 弄髒,

這裡老師也分享一個是使用 父元素 增加清除浮動的語法,要清除浮動的內容就在父元素加上 clearfix 的 class 就大功告成,兩個清除浮動的用法就視情況來使用哩
-清除浮動前:
html:

  <div class="left"></div>
  <div class="right"></div>
</div>
CSS:
.content{
  background: orange;
  margin: 0 auto;
  padding: 30px;
  width: 500px;
}

.left{
  background: blue;
  height: 300px;
  width: 100px;
  float: left;
}
.right{
  background: red;
  height: 300px;
  width: 100px;
  float: right;
}

https://ithelp.ithome.com.tw/upload/images/20201110/20132398lZMzL3NiTt.png
-清除浮動後:

<div class="content clearfix">
  <div class="left"></div>
  <div class="right"></div>
</div>
CSS:
.content{
  background: orange;
  margin: 0 auto;
  padding: 30px;
  width: 500px;
}

.left{
  background: blue;
  height: 300px;
  width: 100px;
  float: left;
}
.right{
  background: red;
  height: 300px;
  width: 100px;
  float: right;
}
.clearfix:after{
  content:'';
  display:table;
  clear:both;
}

https://ithelp.ithome.com.tw/upload/images/20201110/20132398g1T1OZobxc.png


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言