浮动

来源：互联网发布：数组词有哪些编辑：程序博客网时间：2024/05/04 09:23

关于浮动的一些事项：

1、只要使用了浮动便是脱离了文档流，不占有空间就是文档流。

2、浮动了的元素会优先显示。

3、清除浮动的方法：直接找到最后一个元素的后边的标签添加 clear：both。

代码如下：（内含注释）

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{padding: 0; margin: 0;}div{/*display: inline-block;*/float: left;width: 60px;height: 25px;background: red;border-radius: 50%;text-align: center;line-height: 25px;color: #fff;}p{width: 80px;height: 25px;background: black;clear: both;}.clearfix:after{/*伪类选择器,在...之后插入*/content: "";display: block;clear: both;/*width: 50px;height: 50px;background: green;*/}br{clear: both;}</style></head><body><div>1</div><div>2</div><div>3</div><div <!--class="clearfix"-->>4</div><br /><p>5</p></body></html>

阅读全文

0 0