浮动与清除

anmei3400

于 2019-02-03 16:44:00 发布

阅读量96

点赞数

原文链接：http://www.cnblogs.com/weew12/p/10583044.html

版权

浮动与清除

1.文字环绕图片:

实现：

<!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>

效果:

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>

效果：

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>

效果:

现在想要让图片下方的文字显示在图片的右边，我们让图片浮动:

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

效果:

我们可以看到，section不再包围浮动元素了，它只包围非浮动的p元素。 footer 被提了上来，紧挨着前一个块级元素section。
如果我们想让section依旧包围浮动的元素在里面，可以使用以下的三种方法:

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>

效果：

上述知识点可以参考：

CSS设计指南（第三版）

[英]　Charles Wyke-Smith　著

李松峰　译

转载于:https://www.cnblogs.com/weew12/p/10583044.html

anmei3400

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浮动与清除

浮动与清除1.文字环绕图片:实现：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial...
复制链接

扫一扫