怎样清除html元素的浮动

 时间:2026-02-14 21:03:34

1、首先,我们制作一个简单的html页面。父级元素是div,内部元素,是两个ul,两个ul分别是左浮动。并且为父级元素添加边框。

怎样清除html元素的浮动

2、我们可以发现,父级元素根本没有被子元素的高度所撑开,而是只保持了h标签的高度,这就是浮动,导致的。

怎样清除html元素的浮动

3、清除浮动,顾名思义就是clear:both,这的确是一种方法,但是要确定我们的clear:both是应用在哪里。

怎样清除html元素的浮动

4、我们可以在html页面上,最后一个浮动元素的后面,添加一个div,并设置其style为clear:both。

怎样清除html元素的浮动

5、我们还可以为浮动的元素的父级元素添加伪类,*::after{content""; display:block; clear:both},这样将会使得浮动止于此

怎样清除html元素的浮动

6、除了这些,我们还可以为父级元素添加overflow属性,可以设为hidden,也可以设为auto

怎样清除html元素的浮动

7、以上三种方法是小渔自己通过亲身经历,总结而来的哦。正确的页面显示效果如图所示

怎样清除html元素的浮动

  • 使用dreamwaver设置字体、背景,插入图片
  • DreamWeaver CS6网页制作教程
  • Dreamweave怎么插入图片到软件里面
  • wonder如何设置夜间模式
  • 自我调整的方式
  • 热门搜索
    海鲜过敏怎么办 茶叶蛋怎么做才入味又好吃 约克中央空调怎么样 怎么截图 鼻子不通气怎么办 sd卡受损怎么修复 怎么把图片上的字去掉 qq怎么群发 咸鱼怎么做好吃 蚜虫怎么治