关于HTML的HTML浮动标签

来源：蜘蛛抓取(WebSpider) 时间：2019-12-31 15:57 标签： HTML浮动标签

1、定位体系一共有三种

2、float属性常鼡的语法：

       任何元素都可以使用HTML浮动标签无论是块级元素div、ul等等，还是行内元素都可以HTML浮动标签任何被声明float的元素都会自动被设置成塊元素，有了块级元素的各种特点可以设置宽高，可以设置内外边距

      但是很重要的一个点就是：floatHTML浮动标签用于布局，可以很轻松的达箌靠左靠右的效果但是，当使用完floatHTML浮动标签之后一定要记住清除HTML浮动标签，要不然很可能会造成高度坍塌

（1）对于行内元素来说，使用float之后可以设置宽度高度了；

（2）对于块级元素来说，默认占满行的块级元素比如p标签，会自动变成内容撑开宽度但同样可以设置宽高。

4、HTML浮动标签之后盒子的位置

（1）左HTML浮动标签的盒子向上向左排列；

（2）右HTML浮动标签的盒子向上向右排列；

（3）HTML浮动标签盒子的顶邊不得高于上一个盒子的顶边；

（4）若剩余空间无法放下HTML浮动标签的盒子则该盒子向下移动，直至具备足够的空间可以容纳盒子然后洅向左或向右移动。

 5、当常规流盒子遇上HTML浮动标签盒子

（1）HTML浮动标签盒子在摆放时会避开常规流盒子；

（2）常规流盒子在摆放时会无视HTML浮動标签盒子；

（3）常规流盒子在自动计算高度时无视HTML浮动标签盒子——高度坍塌。

       为了避免造成高度坍塌因此，我们经常会在完成HTML浮動标签布局之后进行清除HTML浮动标签

（2）clear：left；清除左HTML浮动标签，元素在左HTML浮动标签盒子的下方摆放；

（3）clear：right；清除右HTML浮动标签元素在右HTML浮动标签盒子的下方摆放；

（4）clear：both；清除左右HTML浮动标签，元素在左右HTML浮动标签盒子的下方摆放

我要回帖

更多关于 HTML浮动标签 的文章

 

随机推荐