浮動與清除

時間 2019-11-24

標籤浮動清除简体版

原文原文鏈接

浮動與清除

1.文字環繞圖片:

實現：css

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style type="text/css">
    p {margin:0; border:1px solid red;}
    img {float:left; margin:0 4px 4px 0; width: 100px; height: 100px;}
  </style>
</head>
<body>
   <img src="1.jpg" title="測試圖片">
  <p>Message boxes. When using software......</p>
</body>
</html>

效果:html

2.分欄

實現:測試

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style type="text/css">
    p {float:left; margin:0; width:200px; border:1px solid red;}
    img {float:left; margin:0 4px 4px 0; width: 100px; height: 100px;}
  </style>
</head>
<body>
   <img src="1.jpg" title="測試圖片">
  <p>Message boxes. When using software......</p>
</body>
</html>

效果：ui

3.浮動對文檔的影響

原始界面:設計

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style type="text/css">
    section {border:1px solid blue; margin:0 0 10px 0;}
    p {margin 0;}
    img{width: 200px; height: 200px;}
    footer {border:1px solid red;}
  </style>
</head>
<body>
  <section>
  <img src="1.jpg">
  <p>It's fun to float.</p>
  </section>
  <footer> Here is the footer element that runs across the bottom of the
  page.</footer>
</body>
</html>

效果:3d

如今想要讓圖片下方的文字顯示在圖片的右邊，咱們讓圖片浮動:code

img{float: left; width: 200px; height: 200px;}

效果:htm

咱們能夠看到，section再也不包圍浮動元素了，它只包圍非浮動的p元素。 footer 被提了上來，緊挨着前一個塊級元素section。
若是咱們想讓section依舊包圍浮動的元素在裏面，可使用如下的三種方法:blog

1.爲父元素添加 overflow:hidden

樣式：圖片

<style type="text/css">
    section {border:1px solid blue; margin:0 0 10px 0; overflow:hidden;}
    p {border:1px solid red;}
    img{float: left; width: 200px; height: 200px;}
    footer {border:1px solid red;}
  </style>

2.同時浮動父元素

樣式:

<style type="text/css">
    section {border:1px solid blue; float:left; width:100%;}
    p {border:1px solid red;}
    img{float: left; width: 200px; height: 200px;}
    footer {border:1px solid red;}
  </style>

3.添加非浮動的清除元素

1.在 HTML 標記中添加一個子元素，並給它應用clear 屬性

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style type="text/css">
    section {border:1px solid blue;}
    .clear_me {clear:left;}
    img{float: left; width: 200px; height: 200px;}
    footer {border:1px solid red;}
  </style>
</head>
<body>
  <section>
  <img src="1.jpg">
  <p>It's fun to float.</p>
  <div class="clear_me"></div>
  </section>
  <footer> Here is the footer element that runs across the bottom of the
  page.</footer>
</body>
</html>

2.給父元素添加一個類(clearfix)

eg:給父元素section添加一個類(clearfix)

代碼:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style type="text/css">
    section {border:1px solid blue;}
    img{float: left; width: 200px; height: 200px;}
    footer {border:1px solid red;}
    .clearfix:after {
      content:".";
      display:block;
      height:0;
      visibility:hidden;
      clear:both;
    }
  </style>
</head>
<body>
  <section class="clearfix">
  <img src="1.jpg">
  <p>It's fun to float.</p>
  <div class="clear_me"></div>
  </section>
  <footer> Here is the footer element that runs across the bottom of the
  page.</footer>
</body>
</html>

效果：