CSS中浮动是什么意思?

html-css016

CSS中浮动是什么意思?,第1张

浮动什么意思呢,比如,默认的,我们知道,div是占满一行的,现在我们想把两个div显示在一行上,那怎么办呢

<div style="width:100px">11111</div><div style="width:150px">2222</div>

这样我们就设置了两个div,一个宽度100px,一个宽150px,可预览一下,我们的div仍在两行上,那么怎么把它改到一行上呢,这儿就需要float,设置第一个div的float为left

<div style="width:100pxfloat:left">11111</div><div style="width:150px">2222</div>

再预览,就可以看到,它们到一行上了。

clear是什么意思呢,clear是清除的意思,它有三个值,left,right,both

很好理解,如果设置了clear:left,它就不怕它的左边有float,同理clear:right,clear:both,是左右都不让有float

举个例子,还是上面的

我们设置第二个div的clear:left,也就是不让它左边有float

<div style="width:100pxfloat:left">11111</div><div style="width:150pxclear:left">2222</div>

我们预览一下,就可以看到,尽管第一个div已经float:left了,这两个div仍然在两行上,就是由于第二个div不让它左边有float

因为css的定义是后面的可以覆盖前面的,明白了吧

1、浮动元素会完全脱离文档流,不再占据文档流中的位置

2、设置浮动以后元素会向父元素的左侧或右侧移动,

3、浮动元素默认不会从父元素中移出

4、浮动元素向左或向右移动时,不会超过它前边的其他浮动元素

5、如果浮动元素的上边是一个没有浮动的块元素,则浮动元素无法上移

6、浮动元素不会超过它上边的浮动的兄弟元素,最多最多就是和它一样高

在浮动布局中,父元素的高度默认是被子元素撑开的,当子元素浮动后,其会完全脱离文档流,子元素从文档流中脱离, 将会无法撑起父元素的高度,导致父元素的高度丢失。

父元素高度丢失以后,其下的元素会自动上移,导致页面的布局混乱,所以高度塌陷是浮动布局中比较常见的一个问题,这个问题我们必须要进行处理!

思想:在父元素的后面加内容,内容利用clear清除浮动元素带来的影响

允许其他元素包围一个元素。关于css浮动正确的是允许其他元素包围一个元素。css浮动是一种使元素脱离普通标准流控制的方法,元素会根据float的值向左或向右移动,直到外边界碰到父元素的内边界为止。