清除浮动-CSS入门基础（024）

最新推荐文章于 2021-04-08 13:09:39 发布

虾米大王

最新推荐文章于 2021-04-08 13:09:39 发布

阅读量192

点赞数

分类专栏： CSS 文章标签： css css3 html html5

本文链接：https://blog.csdn.net/modern358/article/details/111739670

版权

CSS 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

今天我们接着分享关于浮动布局的内容。

清除浮动clear：

在css中，清除浮动是在定义了浮动元素之后设置的。

语法：

clear:取值；

clear属性取值
属性值	说明
left	清除左浮动
right	清除右浮动
both	左右浮动一起清除

一般情况，使用clear属性清除浮动时，很少会“clear：left”或者“clear right”来判断清除左浮动，还是清除右浮动，直接会使用clear：both。

示例代码：

<html>  <head>    <title>清除浮动</title>    <style type="text/css">      #father {        width:400px;        background-color:#0c6a9d;        border: 1px solid silver;      }      #father div {        padding:10px;        margin:15px;        border:2px dashed red;        background-color: #fcd568;      }      #father p {        margin:15px;        border:2px dashed red;        background-color: #fcd568;      }      #box1 { float:left;}      #box2 { float:left;}      p { clear:both;}    </style>  </head>  <body>    <div id="father">      <div id="box1">box1</div>      <div id="box2">box2</div>      <p>我是浮动外围的文字</p>    </div>  </body></html>

预览效果后，我们发现由于p元素清除了浮动，所以p元素的前一个元素产生的浮动就不会对后续元素产生影响了。

定位布局：

浮动布局比较灵活，但是不容易控制。而定位布局的出现，使得精准定位页面中的任意元素成为可能。

CSS定位使你可以将一个元素精确地放在页面上你指定的位置。

定位布局共有四种方式。

固定定位fixed，相对定位relative，绝对定位absolute，静态定位static。

固定定位fixed：

在CSS中，固定定位是最直观，最容易理解的定位方式。当元素的position属性设定为fixed时，这个元素就被固定了，被固定的元素不会随着滚动条的拖动而改变位置。

语法：

position:fixed；top:像素值；bottom：像素值；left：像素值；right：像素值；

“position：fixed”，结合top，bottom，left，right这4个属性使用。

示例代码：

<html>  <head>    <title>固定定位</title>    <style type="text/css">      #first {        width:120px;        height:600px;        border: 1px solid gray;        line-height: 600px;        background-color: #b7f1ff;      }      #second {        position:fixed;        top: 30px;        left:160px;        width:60px;        height:60px;        border:1px solid silver;        background-color:#fa16c9;      }    </style>  </head>  <body>    <div id="first">无定位的元素</div>    <div id="second">固定定位的元素</div>  </body></html>

预览效果时，我们可以把窗体缩小刚好埋没过div元素，然后拖动滚动条，就可以看到，固定定位div在屏幕的位置像是固定住了。

相对定位relative：

采用相对定位的元素，其位置是相对于它的原始位置计算而来的。

语法：

position:relative;top:像素值；bottom：像素值；left：像素值；right：像素值；

“position:relative”，是结合top、bottom、left、right这4个属性一起使用。相对定位的容器浮上来后，其后所占的位置仍留有空位，后面的无定位元素不会挤上来。

提醒一下，默认情况下，相对定位元素的位置是相对于原始位置而言，而固定定位元素的位置是相对于浏览器而言的。

示例代码：

<html>  <head>    <title>相对定位</title>    <style type="text/css">      #father {        margin-top:30px;        margin-left:30px;        border: 1px solid silver;        background-color:#b7f1ff;      }      #father div {        width:100px;        height:60px;        margin:10px;        border:1px solid silver;        background-color:#fa16c9;      }      #box2 {        position:relative;        top:20px;        left:40px;      }    </style>  </head>  <body>    <div id="father">      <div id="box1">无定位的元素</div>      <div id="box2">相对定位的元素</div>      <div id="box3">无定位的元素</div>    </div>  </body></html>