1000字范文 > 【web前端开发】CSS浮动

【web前端开发】CSS浮动

时间：2020-05-23 09:28:47

相关推荐

【web前端开发】CSS浮动

文章目录

1.浮动2.伪元素3.标准流4.行内块元素的问题5.浮动的作用6.浮动的特点7.清除浮动方法1:额外标签方法2:单伪元素方法3:双伪元素方法4:overflow

1.浮动

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

元素的水平方向浮动，意味着元素只能靠左或者靠右。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。

如果图像是左浮动，下面的文本流将环绕在它右边：

2.伪元素

伪元素:通过CSS模拟出标签的效果

必须要有content属性伪元素默认是行内元素

3.标准流

块级元素独占一行->垂直布局行内元素/行内块元素一行可以显示多个水平布局

4.行内块元素的问题

接下来讲一下行内块元素的会出现的问题:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>div{width: 100px;height: 60px;display: inline-block;}.one{background-color: skyblue;}.two{background-color: grey;}</style></head><body><div class="one">1</div><div class="two">2</div></body></html>

这个是div换行写的效果

这个是不换行写的效果

如果想要换行写且要两个盒子之间没有空格,就需要用到浮动

5.浮动的作用

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>div{width: 100px;height: 60px;display: inline-block;}.one{background-color: skyblue;/*设置浮动*/float: left;}.two{background-color: grey;/*设置浮动*/float: left;}</style></head><body><div class="one">1</div><div class="two">2</div></body></html>

显示效果:

6.浮动的特点

1.浮动会脱离标准流(俗称"脱标"),在标准流中不占位置

示例:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.one{width: 100px;height: 100px;background-color: skyblue;}.two{width: 200px;height: 200px;background-color: grey;}.three{width: 300px;height: 300px;background-color: greenyellow;}</style></head><body><div class="one">111</div><div class="two">222</div><div class="three">333</div></body></html>

这是不加浮动的显示效果,下面看看加了浮动的

在上面代码的基础上,给one这个类选择器加一个浮动

.one{width: 100px;height: 100px;background-color: skyblue;/*增加浮动*/float: left;}

效果:

可以看到第二个跑到了第一个div的位置,就这就是浮动的脱标现象,相当于是飞起来了.

但是蓝色的div盒子并没有把灰色div盒子的内容遮盖掉,虽然是脱标,但算是一种半脱标.

浮动的元素比标准流多半个级别,可以覆盖标准流中的元素这也是浮动的第二个特点

此时如果再给第二个div增加浮动,会是什么效果呢

示例:

.two{width: 200px;height: 200px;background-color: grey;/*增加浮动*/float: left;}

效果

第二个div是紧靠着第一个div对齐的,浮动找浮动下一个浮动元素会在上一个元素的左右浮动 ->浮动的第三个特点

浮动的元素都是靠着最上面对齐的,这也叫顶对齐如果不想顶对齐,也可以给盒子增加外边距实现不对齐

浮动的显示效果:

一行可以显示多个可以设置宽高

浮动后的元素具有行内块元素的特点,但是浮动的元素之间换行写不会有缝隙

7.清除浮动

这里的清除浮动并不是把浮动的代码给清除了,而是其它元素会受到浮动的影响,我们不想让其它元素受到浮动的影响,因此我们需要清除浮动

示例:

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.one{width: 500px;height: 300px;background-color: pink;margin: 0 auto;}.two{width: 100%;height: 100px;background-color: greenyellow;}.three{/*浮动*/float: left;width: 300px;height: 300px;background-color: skyblue;margin: 0 auto;} </style></head><body><div class="one"><div class="three"></div></div><div class="two"></div></body></html>

效果:

如果我想要的是绿色的盒子就在蓝色的盒子下面这个位置显示

那么如果将粉色div的高度去除掉,那么就出现以下效果:

此时按下F12检查,我们发现第一个div的长和宽为500 * 0

蓝色的div已经脱标了.因此绿色的div就跑到上面去了.这就是受到了浮动的影响

父子级关系,父元素没有高度,子元素浮动,后面的标准流盒子就会受到影响
最简单的办法就是给父元素设置高度,但是通常情况下,不会这么写

下面给大家介绍其它清除浮动的方法

方法1:额外标签

方法有两步:1.给父元素内容的最后加一个块级元素 2.给增加的这一个块级元素增加设置: clear:both

示例:

在刚才的代码上进行修改

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>.one{width: 500px;/*height: 300px;*/background-color: pink;margin: 0 auto;}.two{width: 100%;height: 100px;background-color: greenyellow;}.three{float: left;width: 300px;height: 300px;background-color: skyblue;}/*清除浮动*/.clearfix{clear: both;}</style></head><body><div class="one"><div class="three"></div><div class="clearfix"></div></div><div class="two"></div></body></html>

效果:

这个方法不止清除了浮动,也让粉色重新显示出来了

这种方法是增加的行内元素,把原来的盒子撑开了

缺点: 增加了额外的元素,会使HTML结构变得复杂