浮动与清除

时间 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>

浮动与清除

浮动与清除

1.文字环绕图片:

2.分栏

3.浮动对文档的影响

1.为父元素添加 overflow:hidden

2.同时浮动父元素

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

上述知识点能够参考：

CSS设计指南（第三版）

[英]　Charles Wyke-Smith　著

李松峰　译

浮动与清除

浮动与清除

1.文字环绕图片:

2.分栏

3.浮动对文档的影响

1.为父元素添加 overflow:hidden

2.同时浮动父元素

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

上述知识点能够参考：

CSS设计指南（第三版）

[英] Charles Wyke-Smith 著

李松峰 译

[英]　Charles Wyke-Smith　著

李松峰　译