欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > css3案例分享 >

Css clear属性怎么用

发布时间:2019-05-29  编辑:杨雨个人博客网站   点击:   

Css clear属性指定元素的左侧或右侧上不允许出现浮动元素。可用于实现浮动的清除,解决浮动布局带来的一些问题。

Css clear属性怎么用

Css clear属性怎么用?

clear 属性规定元素的哪一侧不允许其他浮动元素。

语法:

clear:left|right|both|none|inherit;

属性值:

● left:在左侧不允许浮动元素。

● right:在右侧不允许浮动元素。

● both:在左右两侧均不允许浮动元素。

● none:默认值。允许浮动元素出现在两侧。

● inherit:规定应该从父元素继承 clear 属性的值。

说明:

clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中,这是通过自动为清除元素(即设置了 clear 属性的元素)增加上外边距实现的。在 CSS2.1 中,会在元素上外边距之上增加清除空间,而外边距本身并不改变。

不论哪一种改变,最终结果都一样,如果声明为左边或右边清除,会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。

注释:所有主流浏览器都支持 clear 属性。任何版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

Css clear属性 示例

<!DOCTYPE Html>
<Html>
<head>
<meta charset="utf-8"> 
<style>
img
{
float:left;
}
p.clear
{
clear:both;
}
</style>
</head>
<body>
<img src="logoCss.gif" width="95" height="84" />
<p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p>
<p>This is also some text. This is also some text. This is also some text. This is also some text. This is also some text.</p>
<br>
<p>使用clear:both清除浮动:</p>
<img src="logoCss.gif" width="95" height="84" />
<p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p>
<p class="clear">This is also some text. This is also some text. This is also some text. This is also some text. This is also some text. </p>
</body>
</Html>

效果图:

1.jpg 本文地址:http://itbyc.com/web/css3/21116.html
转载请注明出处。

分享是一种快乐,也是一种美德:
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1