div独占一行 html_浅析HTML/CSS和JavaScript关联性

本文深入探讨了HTML中的div元素及其在页面布局中的作用,特别是浮动特性。通过分析div的块级元素属性,展示了如何利用浮动(float:left/right;)实现元素的灵活布局。讨论了多个浮动元素的排列规则,并介绍了清除浮动(clear:left/right/both;)的概念,以帮助理解和解决布局问题。
摘要由CSDN通过智能技术生成

网页美工设计培训大咖在分析HTML/CSS和JavaScript关联性之前,同学们首先要知道,div是块级元素,在页面中独占一行,自上而下排列,也就是传说中的流。如下图:

15887d4a80317f07d1a67995ba23471e.png

可以看出,即使div1的宽度很小,页面中一行可以容下div1和div2,div2也不会排在div1后边,因为div元素是独占一行的。

注意,以上这些理论,是指标准流中的div。

无论多么复杂的布局,其基本出发点均是:“如何在一行显示多个div元素”。

显然标准流已经无法满足需求,这就要用到浮动。

浮动可以理解为让某个div元素脱离标准流,漂浮在标准流之上,和标准流不是一个层次。

例如,假设上图中的div2浮动,那么它将脱离标准流,但div1、div3、div4仍然在标准流当中,所以div3会自动向上移动,占据div2的位置,重新组成一个流。如图:

7b38df4ba5077c8585c8da0712124b58.png

从图中可以看出,由于对div2设置浮动

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值