CSS 清除浮动

上节课我们有一个现行三列的例子。

这个例子出现了浮动。

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>
 
 
posted @ 2019-05-09 16:06  乱世以外  阅读(229)  评论(0编辑  收藏  举报