首页 >web前端 >html教程 > 正文

html如何清除浮动

原创2021-04-26 15:46:420930

html清除浮动的方法:1、给浮动元素的父级高度和宽度;2、父级元素加上【overflow:hidden】;3、给兄弟元素加一个【clear:both】;4、利用伪类去除浮动。

本教程操作环境:windows7系统、html5版,DELL G3电脑。

html清除浮动的方法:

方法一:(给父级元素宽度和高度)

  由于浮动元素不占据文档流,所以说紫色div是由于没有内容撑开高度才消失的,而不是不存在了。所以方法一就是我们给紫色div高度和宽度也就是给浮动元素的父级高度和宽度,从而让它自己撑开宽高,从而进行显示。

css代码:

#div1{width:600px;height:300px;background: medium purple;}
 
#left{width: 200px;height: 100px;background: sky-blue;}
 
#right{width: 250px;height: 150px;background: pink;}

效果图:

6acf4951e2d747ee75e943cdcc0cde5.png

方法二:父级元素加上overflow:hidden

很多人会说我们不想给紫色div固定的宽高,想让它的内容将它撑开。那么我们就可以在父级元素上也就是紫色div的css中加上overflow:hidden。从而让紫色div显示出来了。

css代码:

#div1{background: medium purple;overflow:hidden}

效果图

d5ad5c1d0d9b465f97cea6f13bd10e5.png

方法三:给兄弟元素加一个clear:both

除了对父级进行改变,我们也可以对子元素的兄弟元素进行改动,从而达到去除浮动的效果。

html代码:

<div id="div1">
    <div id="left"></div>
    <div id= "right"></div>
    <div id="div2"></div>
</div>

效果图:

e16f44860e22ba00d7faf47eb99b006.png

方法四:利用伪类去除浮动

用伪类清除浮动时用after,并且加上content:""可以加内容也可以不加,但是一定要加上display:block;同时还要写clear:both;

css代码:

#div1:after{content:"";clear: both;display: block;}

效果图:

bf6138903f7ca26ab20500609a9b8b0.png

相关学习推荐:html视频教程

以上就是html如何清除浮动的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码

声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理

  • 相关标签:html 清除浮动
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    作者信息
    推荐视频教程
  • html与CSS基础入门视频教程html与CSS基础入门视频教程
  • html5教程:六小时玩转js与字符串视频教程-千锋教育html5教程:六小时玩转js与字符串视频教程-千锋教育
  • HTML5新特性基础视频教程HTML5新特性基础视频教程
  • 野秀堂HTML5+CSS3视频教程野秀堂HTML5+CSS3视频教程
  • HTML极速入门(2018版)HTML极速入门(2018版)
  • 视频教程分类