css3中清除浮动的代码是什么_餐饮美食网

当前所在位置: 首页 > 儿童教育 > 正文

css3中清除浮动的代码是什么

2023-02-01 餐饮美食网【字体：大中小】

代码是：1、“.clear{clear:both}”，规定元素左右不浮动；2、“overflow:auto”，设置内容被修剪来清除浮动；3、“元素:after{display:table;}”，设置元素以块级表格显示，占满剩余空间清除浮动。

本教程操作环境：windows10系统、CSS3&&HTML5版、Dell G3电脑。

css3中清除浮动的代码是什么

方法1：使用带clear属性的空元素

使用空标签清除浮动：在需要清除浮动的父级元素内部的所有浮动元素后添加一个空标签（理论上可以是任何标签，但常用<div>和<p>）清除浮动，并为其定义CSS代码clear:both。

代码实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.demo{
width: 500px;
margin: 50px auto;
background-color: #CCCCCC;
}
.left{
width: 100px;
height: 100px;
float: left;
background-color: #21B4BB;
}
.right{
width: 100px;
height: 50px;
float: right;
background-color: #21B4BB;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div class="demo">
<div class="left">left</div>
<div class="right">right</div>
<div class="clear"></div>
</div>
</body>
</html>

优点：简单，代码少，浏览器兼容性好。

缺点：需要添加大量无语义的html元素，代码不够优雅，后期不容易维护。

方法2：使用CSS的overflow属性

使用overflow清除浮动：只需在需要清除浮动的元素中定义CSS代码overflow:auto或overflow:hidden即可。

代码实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.demo{
width: 500px;
margin: 50px auto;
background-color: #CCCCCC;
overflow:hidden
}
.left{
width: 100px;
height: 100px;
float: left;
background-color: #21B4BB;
}
.right{
width: 100px;
height: 50px;
float: right;
background-color: #21B4BB;
}
</style>
</head>
<body>
<div class="demo">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>

优点：不存在结构和语义化问题，代码量极少

缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素

方法3：使用CSS的:after伪元素

对父元素使用:after伪元素，设置display:table。

display:table 使生成的元素以块级表格显示，占满剩余空间。

通过content: " "生成内容作为最后一个元素，至于content里面是什么都是可以的，CSS经典的是 content:"."，有些版本可能content里面内容为空。

代码实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.demo{
width: 500px;
margin: 50px auto;
background-color: #CCCCCC;
*zoom: 1;
}
.demo:after { 
content: " ";
display: table; 
clear: both;  
}  
.left{
width: 100px;
height: 100px;
float: left;
background-color: #21B4BB;
}
.right{
width: 100px;
height: 50px;
float: right;
background-color: #21B4BB;
}
</style>
</head>
<body>
<div class="demo">
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html>

缺点：适合现代浏览器，不支持IE6/7，*zoom: 1就是为了兼容IE6/7

（学习分享：css教程）

以上就是css3中清除浮动的代码是什么的详细内容

阅读全文

猜你喜欢

外交学专业论文参考文献

制药工程专业参考文献

公安学专业参考文献

平面设计参考文献

植物保护专业论文参考文献

安全心理学论文的参考文献

舞蹈生求职简历模板怎么写

护士的简历怎么写

php个人简历项目经验怎么写

个人简历的制作要点

本文Tag