当前位置: 首页 > Web前端 > CSS

css-float

时间:2023-03-30 23:17:32 CSS

一、浮动的定义一个浮动框会向左或向右移动,直到它的外边缘接触到包含块的边缘或者另一个浮动框的外边缘。如果存在线框,则浮动框的外顶(边)与当前线框的顶(边)对齐。如果没有足够的水平空间放置浮动,它将向下移动直到空间适合或不再出现浮动。因为浮动(盒子)不在正常流动中,未定位(未定位)的块盒子将垂直排列,就好像浮动不存在一样。然而,由浮动框创建的当前和后续行框会根据需要缩短,以便为浮动框的边距框腾出空间。二、浮动的例子浮动的定义很枯燥。下面我们通过几个例子来理解浮动的概念。1.浮箱放不下会包裹起来。演示链接说明1

2
3
结果,所有的盒子都会向左浮动,直到外边缘接触到块边缘。因为容器的宽度不够,box3放不下,只能往下移到最左边。2.卡住演示链接描述123执行结果是由于box1的高度比box2高。当box3向下和向左移动时,它遇到box1的外边缘并停止移动。3.浮动和文本演示链接描述1

到包含块的边缘或另一个浮动框的外部。如果有线框,则浮动框的外顶(边)与当前线框的顶(边)对齐如果没有足够的水平空间浮动,则向下移动,直到有空间或不再出现浮动

23执行结果,我们给p段添加了背景色,发现p段看不到浮动元素,但是里面的文字可以看到浮动元素。当普通元素遇到浮动元素时,普通元素看不到浮动元素。但是里面的linebox是可以看到浮动元素的,linebox会被缩短,为浮动元素腾出空间。写一下我理解的lineboxes的概念。linebox是line-box,即块级元素显示的每一行都是一个linebox。块级元素内显示在一行中的所有元素共同构成一个行框。比如下图中的img和span1组成了一个linebox,剩下的两个span和button组成了另外一个linebox。当页面区域发生变化时,每一行的内容都会发生变化,linebox的内容也会发生变化。这里有一篇文章的链接,写了linebox的垂直方向。说明4.浮动会脱离正常流动。正常流程遵循的规则是块级元素占据一行,行内元素占据内容的宽度。所有元素从上到下依次排列,普通元素可以展开父元素的内容。但是浮动元素是不一般的流向,元素不是从上到下一个一个排列的,浮动元素也无法铺开父元素,因为父元素根本看不到浮动元素。演示链接说明5.块级元素设置为浮动后,宽度会缩小,宽度由内容决定。内联元素设置为浮动后,可以设置宽度、高度、内外边距。感觉有点像inline-block的特性ThisisdivThisisspan三、浮动的副作用1.影响后续元素的位置demo:linkdescriptionsidebarfixedwidth侧边栏固定宽度内容块自适应宽度我是页脚,但是我的有样式有问题