您的位置: 翼速应用 > 业内知识 > web前端 > 正文

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

操作windows10系统、CSS3&&HTML5版、Dell G3电脑时css3中清除浮动的代码是什么


清除浮动的代码


1:使用带clear属性的空元素


使用空标签清除浮动:在需要清除浮动的父级元素内部的所有浮动元素后添加一个空标签(理论上可以是任何标签,但常用

)清除浮动,并为其定义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 ;
}
</sty1e>
< /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
t="UTF-8" >

<title></title>

<style>
. demo{

width: 
500px;

margin:
50px auto;

backgr
round-color:
#CCCCCC ;

overflouthidden

}
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="TF-8">

<title></title>

<style>

. demo{

width :
500px;

margin: 50px auto;

background-color: cCCCc;

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>


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



以上就是关于css3中清除浮动的代码是什么的全部内容,想了解更多的话请关注翼速网络应用平台获取更多内容!



我来说两句

0 条评论

推荐阅读

  • 响应式布局CSS媒体查询设备像素比介绍

    构建响应式网站布局最常见的是流体网格,灵活调整大小的站点布局技术,确保用户在使用的幕上获得完整的体验。响应式设计如何展示富媒体图像,可以通过以下几种方法。

    admin
  • 提升网站的性能快速加载的实用技巧

    网站速度很重要,快速加载的网站会带来更好的用户体验、更高的转化率、更多的参与度,而且在搜索引擎排名中也扮演重要角色,做SEO,网站硬件是起跑线,如果输在了起跑线,又怎么跟同行竞争。有许多方法可提升网站的性能,有一些技巧可以避免踩坑。

    admin
  • 织梦CMS TAG页找不到标签和实现彩色标签解决方法

    织梦cms是我们常见的网站程序系统的一款,在TAG标签中常常遇到的问题也很多。当我们点击 tags.php 页的某个标签的时候,有时会提示:“系统无此标签,可 能已经移除!” 但是我们检查程序后台,以及前台显示页面。这个标签确实存在,如果解决这个问题那?

    admin
  • HTML关于fieldset标签主要的作用

    在前端开发html页面中常用的标签很多,今天为大家带来的是关于HTML中fieldset标签主要的作用说明,根据技术分析HTML

    admin

精选专题