美文网首页
CSS:浮动

CSS:浮动

作者: like26th | 来源:发表于2021-05-10 16:27 被阅读0次

浮动盒子(float)可以设置为向左或向右,即一直向左或向右移动,直到碰到父级边缘或另一个浮动盒子。设置为浮动的元素宽度会收缩为适应其内容的最小宽度,除非手动设置宽度(width/min-width/max-width)。

浮动元素会脱离文档流,不会影响其他元素,但是其他元素中的文本内容会在排布时避开浮动元素,造成文本围绕浮动盒子的效果,据说这也是引入浮动元素的初衷。

想阻止其他元素包围在浮动元素周围,需要添加clear属性。图中图片浮动在右侧,粉色按钮包围浮动元素导致箭头不局中。


1.png

给粉色布局添加clear:right后,让出了浮动元素的位置,箭头居中。


2.png

需要注意的是的,添加了clear后,实际上是给粉色按钮部分添加了一个上边距,使其移动到浮动元素下方,这个时候如果想给粉色部分添加上边距,除非给定的值超过了clear属性带来的值,否则没什么效果。

总结一下浮动元素会导致后面的行盒子缩短,从而造成文本环绕效果,此外不会对周围元素有任何影响。

还有一种情况,假如我这里没有数据了,更多按钮也不显示了(没有清除浮动效果了),效果就会变成:


3.png

设置了浮动的图片脱离了文档流,包裹它的布局无法生成对应的高度,此时由于没有其他数据,也无法使用clear来创造足够的垂直外边距作为浮动元素的空间。

可以在布局里添加一个空标签,然后在空标签上清除浮动,不过这样出现一个多余标签会逼死心灵洁癖。

或者可以为添加伪元素解决:

.wrap:after{
  content: '';
  display: block;
  clear: right;
}

可以模拟额外的清除元素,同时也不避免加额外的元素。


image.png

参考《精通CSS:高级Web标准解决方案》

相关文章

  • 一篇文章带你了解CSS clear both清除浮动

    一、前言 CSS clear both清除产生浮动 ,使用了css float浮动会产生css浮动,这个时候就需要...

  • CSS浮动

    简介其实,CSS就三个大模块: 盒子模型 、 浮动 、 定位,其余的都是细节。这篇讲CSS浮动,在CSS中浮动主...

  • css定位

    CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供...

  • CSS 定位

    CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供...

  • CSS 定位 (Positioning)

    CSS 定位 (Positioning) 属性允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供...

  • Test10

    引用文章: 那些年我们一起清除过的浮动 CSS浮动float详解 Clear Float CSS float浮动的...

  • CSS定位

    CSS定位(Positioning)允许你对元素进行定位。 CSS 定位和浮动 CSS 为定位和浮动提供了一些属性...

  • CSS盒子模型、定位、浮动

    CSS盒子模型概述 CSS内边距 CSS边框: CSS外边距 CSS定位: CSS浮动:

  • CSS clear both清除浮动

    原文地址:CSS clear both清除浮动 DIV+CSS clear both清除产生浮动我们知道有时使用了...

  • CSS之float,文档流,position详解

    1 CSS浮动 1.1 浮动定义 float即为浮动,在CSS中的作用是使元素脱离正常的文档流并使其移动到其父元素...

网友评论

      本文标题:CSS:浮动

      本文链接:https://www.haomeiwen.com/subject/abuidltx.html