css-float

時間 2019-12-05

標籤 css float 欄目 CSS 简体版

原文原文鏈接

定義選擇往那個方向浮動、以往這個屬性總用於圖像(也適用於其餘元素)，使文本環繞在圖像周圍（一半）,而且脫離了正常的文檔流，若是後面還有元素，該元素會被浮動元素覆蓋，加上這個屬性至關於display: inline-block
環繞特性html

<!DOCTYPE html>
<html lang="en">
<head>
<style>
 .p > div {
   float: left;
   margin: 0;
   font-size: 30px;
 }
 .p {
   border: 1px solid red;
   max-width: 30ex;
 }
</style>
</head>
<body >
  <div class='p'>
    <div>2222</div>
    11111111111111111111
    111111111111111
    1
  </div>
</body>
</html>

脫離正常的文檔流&display: inline-blockcode

<!DOCTYPE html>
<html lang="en">
<head>
<style>
 div:nth-child(even) {
   border: 1px solid red;
   float: left;
   width: 100px;
   height: 20px;
 }
 div:nth-child(odd) {
   border: 2px solid yellow;
   width: 200px;
   height: 20px;
 }
</style>
</head>
<body >
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
</body>
</html>

相關標籤/搜索

cssfloat

CSS

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。