欢迎访问我的的博客,网站主要用于记录学习WEB语言|CMS建站|SEO优化及日常工作常见问题总结!
您的位置:主页 > HTML/CSS >

清浮动的方法

面试题:如何清浮动

  1. 给浮动元素的父元素手动添加一个固定的高度(不推荐)
  2. 给浮动元素的父元素设置overflow:hidden/auto
  3. .在浮动元素的父元素结束标签之前加一个具有块元素特点的标签(我们一般用 div),给元素加一个clear:both<divstyle=clear:both"></div>
  4. clearfix去清除浮动
[clear清除浮动] clear:both不允许左右两边有浮动对象(清除左石两边浮动的影响) clear:left不允许左边有浮动对象(清除左边浮动的影啊) clear:right不允许石边有浮动对象(清除右边浮动的影啊) clear:none允许左右两边有浮动对象默认值(不清除左右两边浮动的影响)
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8">
<title></title>
<styletype="text/css">
.left,.right{
width:200px;
height:200px;
float:left;
}
.left{
background-color:brown;
}
.right{
background-color:cornflowerblue;
}
.hrader{
border:10pxsolidred;
overflow:auto;
background-color:#333333
}
</style>
</head>
<body>
<divclass="hrader">
<divclass="left"></div>
<divclass="right"></div>
<!--<divstyle="clear:both;"></div>
<spanstyle="display:block;clear:both;"></span>-->
</div>
</body>
</html>

如何清浮动效果图

上一篇标题:clearfix的清浮动的技巧
下一篇标题:浮动产生的影响

相关文章

 

文章-清浮动的方法发布日期:2021-04-01 17:20作者:admin
如需转载,请注明文章出处和来源网址:https://www.dhnblog.com/htmlcss/255.html