属性值
float 是最开始出现的一种布局方式,主要解决:文本在图像周围环绕,也即应用于图像。但是在css中,任何元素都可以浮动, 浮动元素会生成一个块级框 ,而不论它本身是何种元素。
元素一般是处于普通流中,也即块级元素独占一行,从上往下依次显示布局。行级元素可以在一行显示多个,按照顺序进行显示布局。
而添加了 float 布局的元素则会脱离原来所在的文档流。并 ‘漂浮’ 在当前所在的文档流的位置(如果前一个元素没有添加 float 布局的情况下),由于当前元素文档流实际上没有被元素占用,因此当前元素之后的元素会按照普通流布局的方式,占用当前元素的文档流。表现为: 丢失空间
也即:
此时由于第一个元素添加了 float:left ,则脱离了原来的文档流,后面元素会向上移动,占用第一个元素的空间。
如果第二个元素也添加了 float ,那么可以这样去思考,由于第一个元素的原因,第二个元素所处的文档流变成了第一个元素所处的文档流,此时再给第二个元素添加 float ,那么也会像第一个元素一样,脱离当前的文档流,使得当前元素和第一个元素一样处于 '漂浮' 状态,并紧跟着第一个元素显示一排。
同样,如果第二个元素后面还有其他元素,那么也会向上移动,改变原来所处的文档流位置。
注意:添加了 float 的元素,只是在会脱离当前所在的文档流,但是仍然漂浮在当前文档流 上一层 ,而不是说直接脱离整个文档流,跑到所有文档流的最顶部 。
从上面案例可以看出,添加了浮动的元素会影响其后元素的布局。此外由于元素脱离原来的文档流,且父盒子没有添加高度属性,那么父盒子无法感知到子盒子的存在,因此父盒子不会被撑开。
知道了 float 带来的不好的地方,则需要去清除浮动带来的影响。
方法一:采用css clear 属性
将该属性添加在被浮动影响的后面元素,即可以清除浮动
则受浮动影响的元素就可以正常显示了
因此在受浮动影响的父元素,就可以利用此方法,在浮动元素之后新增加一个元素,使新增加的元素清除浮动,这样新增加的元素的位置就在浮动元素的下面,使得在一定程度上实现了撑开盒子的作用。
方法二:BFC
其次还可以采用BFC,使得父元素形成独立的空间,也即可以感知子元素的高度和宽度,在一定程度上也不会影响外面的元素的布局。
浮动元素边界不能超过父元素的padding
元素浮动后会变为块元素包括行元素如 span ,所以浮动后的元素可以设置宽高。
通过形状浮动可以让内容围绕图片,类似于我们在word 中的环绕排版。要求图片是有透明度的PNG格式。
shape-outside 定义了一个可以是非矩形的形状,相邻的内联内容应围绕该形状进行包装。默认情况下,内联内容包围其边框, shape-outside 提供了一种自定义此包装的方法,可以将文本包装在复杂对象周围而不是简单的框中。
理解:使用形状值来定义浮动区域的浮动,这将使得内联内容会环绕着形状,而不是产生浮动的边框。
关键字属性值
函数值属性
url值
文字通过给定的图片,并且通过计算图片的透明度后获取的形状区域进行围绕,这里需要注意的是此效果必须在服务器端预览,本地预览会报图片跨域问题,给定的图片必须是有透明区域的图片
渐变值
按照给定的渐变通过计算排除透明通道后得到的形状,然后文字按照此形状的边缘进行环绕
最后:函数值/url/linear-gradient可以和关键字属性值搭配使用,此时关键字属性作为基本形状提供相应的参考框盒。
clip-path 使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。且此方式原来的区域仍然存在,只是显不显示的问题。裁剪之后只有规定的区域可以显示。
基本语法
其中:
如果3个div上下排列,第三个div加上float:right的话,第三个div只是浮动到页面右面,不到到任何div下面。你浮动的是div,自然里面的文字不会浮动了。想要控制div里文字的话可以用属性text-align,具体步骤如下:
1、background-color:rgba(0,0,0,0.1)然后创建一个html文件。
2、从html文件找到<body>标签,然后在这个标签里创建一个<div>标签并添加一个类,在这把这个类设置为:rgba
3、在<title>标签后面创建一个<style>,在<style>标签里设置rgba类的高和背景透明度的样式(rgba(R,G,B,A))。透明度参数,取值在0~1之间,不可为负值,透明度参数越小透明度越高。其中R,G,B,分别代表了红,绿,蓝三种颜色。
4、保存后使用浏览器查看。
5、把所有代码复制到新建的html文件上,然后用浏览器打开窗口看到效果。
1、浮动元素会完全脱离文档流,不再占据文档流中的位置2、设置浮动以后元素会向父元素的左侧或右侧移动,
3、浮动元素默认不会从父元素中移出
4、浮动元素向左或向右移动时,不会超过它前边的其他浮动元素
5、如果浮动元素的上边是一个没有浮动的块元素,则浮动元素无法上移
6、浮动元素不会超过它上边的浮动的兄弟元素,最多最多就是和它一样高
在浮动布局中,父元素的高度默认是被子元素撑开的,当子元素浮动后,其会完全脱离文档流,子元素从文档流中脱离, 将会无法撑起父元素的高度,导致父元素的高度丢失。
父元素高度丢失以后,其下的元素会自动上移,导致页面的布局混乱,所以高度塌陷是浮动布局中比较常见的一个问题,这个问题我们必须要进行处理!
思想:在父元素的后面加内容,内容利用clear清除浮动元素带来的影响