CSS的float及clear

最新推荐文章于 2022-06-22 22:34:33 发布

lord_of_war

最新推荐文章于 2022-06-22 22:34:33 发布

阅读量256

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/lord_of_war/article/details/103054909

float:浮动

float属性在CSS布局中是比较常用的，本文将带你深入理解float属性的各个方面，包括它的语法、取值、作用和浏览器兼容性，最后附上float的实例，希望能够对你有所帮助。

float定义和用法

float：none | left | right

默认值：none

适用于：所有元素

继承性：无

动画性：否

计算值：指定值

float属性值

none：
设置对象不浮动
left：
设置对象浮在左边
right：
设置对象浮在右边

float实例

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS float属性详解-CSS教程</title>
<style>
.test{float:right;background:#eee;}
</style>
</head>
<body>
<div class="test">我将出现在屏幕右方</div>
</body>
</html>

```清除浮动

clear
clear属性在CSS布局中是比较常用的，本文将带你深入理解clear属性的各个方面，包括它的语法、取值、作用和浏览器兼容性，最后附上clear的实例，希望能够对你有所帮助。

clear定义和用法

clear：none | left | right | both

默认值：none

适用于：块级元素

继承性：无

动画性：否

计算值：指定值

clear属性值

none：
允许两边都可以有浮动对象
both：
不允许有浮动对象
left：
不允许左边有浮动对象
right：
不允许右边有浮动对象

clear说明

该属性的值指出了不允许有浮动对象的边

clear实例

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS clear属性详解-CSS教程</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.test{float:right;background:#eee;}
.test2{clear:right;background:#ddd;}
</style>
</head>
<body>
<div class="test">我将出现在屏幕右方</div>
<div class="test2">注意我出现的位置</div>
</body>
</html>