HTML网页浮动布局怎么用，div float布局怎么用

  • 原创
  • |
  • 浏览：17064
  • |
  • 更新：
  • |
  • 标签：HTML 
  • HTML网页浮动布局怎么用，div float布局怎么用1
  • HTML网页浮动布局怎么用，div float布局怎么用2
  • HTML网页浮动布局怎么用，div float布局怎么用3
  • HTML网页浮动布局怎么用，div float布局怎么用4
  • HTML网页浮动布局怎么用，div float布局怎么用5
  • HTML网页浮动布局怎么用，div float布局怎么用6
  • HTML网页浮动布局怎么用，div float布局怎么用7
分步阅读

float布局在PC端布局用得算是普遍，现在小编我就分享一下float浮动布局的经验，希望可以帮助各位宝宝们，这样宝宝们就知道网页浮动布局怎么用了。

工具/原料

  • Hbuilder
  • 电脑

方法/步骤

  1. 1

    如图，先设定一个大容器，里面有两个div小容器，这样才好说明浮动布局。

    HTML网页浮动布局怎么用，div float布局怎么用
  2. 2

    如图，样式就是大容器有黑色边框，小容器一个是红色的，一个是蓝色的。

    HTML网页浮动布局怎么用，div float布局怎么用
  3. 3

    看下默认的布局效果，假设一个网页内有红蓝两个div，现在我们开始用浮动来控制它们的方位。

    HTML网页浮动布局怎么用，div float布局怎么用
  4. 4

    如图，给红div添加左浮动float left，蓝色则是向右边浮动。

    HTML网页浮动布局怎么用，div float布局怎么用
  5. 5

    接着看下浮动的效果，一个在左，一个靠右，但是它们离黑色边框太近了。

    HTML网页浮动布局怎么用，div float布局怎么用
  6. 5
    此文章未经授权抓取自百度经验
  7. 6

    接着分别设置红蓝的margin，这样就可以让红蓝div它们离黑色边框有一定的距离。

    HTML网页浮动布局怎么用，div float布局怎么用
  8. 7

    最后看看红蓝div的方位发生移动了，这就是float的用法，它可以配合margin来用，float浮动的用法还算是比较简单哟，可以多码代码试试。

    HTML网页浮动布局怎么用，div float布局怎么用
    END

注意事项

  • 有用就点赞，投票。
  • 有啥不懂的可以给我留言。
经验内容仅供参考，如果您需解决具体问题(尤其法律、医学等领域)，建议您详细咨询相关领域专业人士。
作者声明：本篇经验系本人依照真实经历原创，未经许可，谢绝转载。
展开阅读全部
相关标签HTML