首页 > 软件开发 > HTML >

HTML网页代码中怎样给浮动对象添加清除浮动

来源:互联网 2023-03-16 19:13:02 301

给一些属性添加了浮动后,就会影响到下面的标签,如果不能影响到下面的标签就需要对浮动的东西进行清除浮动。Fo1办公区 - 实用经验教程分享!

工具/原料

  • HTML

方法/步骤

  • 1

    如图,现在创建几个文本,Fo1办公区 - 实用经验教程分享!

    HTML网页代码中怎样给浮动对象添加清除浮动Fo1办公区 - 实用经验教程分享!

  • 1本页面未经许可获取自百度经验
  • 2

    默认添加下是竖排排列的,如图Fo1办公区 - 实用经验教程分享!

    HTML网页代码中怎样给浮动对象添加清除浮动Fo1办公区 - 实用经验教程分享!

  • 3

    下面对这几个文本添加浮动效果Fo1办公区 - 实用经验教程分享!

    HTML网页代码中怎样给浮动对象添加清除浮动Fo1办公区 - 实用经验教程分享!

  • 4

    这时候我们可以看到父级变成了一条直线,这就是添加了浮动没有清除而造成父级的影响Fo1办公区 - 实用经验教程分享!

    HTML网页代码中怎样给浮动对象添加清除浮动Fo1办公区 - 实用经验教程分享!

  • 5

    解除这种浮动效果,可以对父级添加overflow:hidden;Fo1办公区 - 实用经验教程分享!

    HTML网页代码中怎样给浮动对象添加清除浮动Fo1办公区 - 实用经验教程分享!

  • 6

    这样可以清除子级浮动带来的效果Fo1办公区 - 实用经验教程分享!

    HTML网页代码中怎样给浮动对象添加清除浮动Fo1办公区 - 实用经验教程分享!

  • 7

    也可以对子级添加clearfix,清除浮动命令Fo1办公区 - 实用经验教程分享!

    HTML网页代码中怎样给浮动对象添加清除浮动Fo1办公区 - 实用经验教程分享!

  • 8

    这样也能起到清除浮动,不影响父级的效果,如图所示。Fo1办公区 - 实用经验教程分享!

    HTML网页代码中怎样给浮动对象添加清除浮动Fo1办公区 - 实用经验教程分享!

  • 注意事项

    • 如果此经验对您有帮助,请左侧投票/关注,谢谢大家的支持^_^

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!Fo1办公区 - 实用经验教程分享!


    标签: HTML

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码