CSS 清除浮动

最新推荐文章于 2025-05-13 15:09:04 发布

weixin_30781107

最新推荐文章于 2025-05-13 15:09:04 发布

阅读量45

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lszw/p/10839066.html

上节课我们有一个现行三列的例子。
这个例子出现了浮动。
CSS 有一个属性clear可以解决浮动的问题。它有4个值：
left:盒子的左侧不能接触同一个包含元素内的其它任何元素。
right:盒子的右侧不能接触同一个包含元素内的其它任何元素。
both:盒子的左侧和右侧都不能接触同一个包含元素内的其它任何元素。
none:盒子的左侧和右侧都可以接触元素。
要解决上节课的问题，只要给第2行第3列的元素添加规则：clear:left
代码如下：

  <!DOCTYPE html>
 
  <
  html
  >
 
  <
  head
  >
 
  <
  title
  >元素并排</
  title
  >
 
  <
  meta 
  charset
  =
  "UTF-8"
  >
 
  <
  style 
  type
  =
  "text/css"
  >
 
  body {
 
  width: 750px;
 
  color: #fff;}
 
  p {
 
  width: 230px;
 
  float: left;
 
  margin: 5px;
 
  padding: 5px;
 
  Bitstream Vera Sans Mono", "Courier New", Courier, monospace; font-size: 16px; border-radius: 0px !important; background-image: none !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px 1em !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; white-space: pre !important;">            .clear{clear:left}  
 
          </style>
 
      </head>
 
      <body>
 
          <h1 style="color:#706fd3">软件开发，成就梦想</h1>
 
          <h2><a href="https://www.liyongzhen.com/">学编程，上利永贞网</a></h2>
 
          <p>CSS是一个描述HTML文档的样式语言。CSS描述HTML元素的显示方式。</p>
 
          <p>本教程将教你CSS从基础到网页布局，学完本教程，可以设计出漂亮的网站。本教程需要HTML知识为基础，学习HTML前往《HTML 教程》</p>
 
          <p>你只需下载一个Chrome浏览器和一个Notepad++一样的文本编辑器，另加一个取色器软件，无需其它工具。</p>
 
          <p class="clear">教程中的术语、名词、概念、原理，不需要死死记住，了解，再了解，能用自己的复述出来即可。
 
          教程中的示例，刚刚学，有些地方可能不懂，这没关系，不会影响后面的学习，过一阵子回过送来，你会豁然开朗，原来如此呀。</p>
 
          <p>将示例代码，敲入你的文本编辑器，保存，用Chrome浏览器打开；这样的事做得越多，你越有自信。
 
          <p>层叠样式表（英语：Cascading Style Sheets，简写CSS），又称串样式列表、级联样式表、串接样式表、阶层式样式表，
 
          一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。</p>
 
      </body>
 
  </html>