CSS float浮动布局

html-css06

CSS float浮动布局,第1张

属性值

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 使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。且此方式原来的区域仍然存在,只是显不显示的问题。裁剪之后只有规定的区域可以显示。

基本语法

其中:

css中float,就是浮动的意思。

浮动什么意思呢?比如,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>

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

1,浮动的历史

在早期网页制作过程中,为了达到图片word文档那样的文字环绕效果,不至于图片和文字不在一行显示,图片占据一行,文字占据一行,这样的样式并不符合大众的审美观,浪费空间,所以w3c就创建了float这个css属性。

2,浮动的包裹性和破坏性

破坏性是指子级元素设置浮动后将会跳出父级元素,父级元素将不被浮动元素所撑开,除非清除浮动带来的影响。

包裹性是指子级元素设置浮动后,并且父元素已经被清除浮动后将会将子元素包裹住,就像inline-block一样。

4,浮动在布局中的应用

(1),双飞翼布局

双飞翼布局就是利用float和margin负值相结合的方式,将center定位到最中间,难点在于margin单位百分比的理解。

(2),圣杯布局

圣杯和双飞翼区别:

二者都是三栏自适应布局方案,圣杯布局是需要结合相对定位,用到left属性,而双飞翼布局只需要使用浮动和margin定位,前者三栏布局是每栏相互独立,而后者是center占据是100%,left和right是浮在center上的。

(2),两列布局

如图五图六所示,当左侧div左浮动,右侧div将会自动适应余下的宽度,当界面大小发生改变时,右侧div同样会随着变化,如果想让左右div中间有一个间距的话,我们可以用右侧div设置一个margin-left为:左侧div的宽度+间距。

如果想让左侧右侧同时自适应的话,我们可以让右侧元素BFC化,此时左侧元素div的marin-left才会有效,如果右侧div不BFC化的话,属于正常流,而浮动已经脱离正常流,所以此时它的margin-left是无效的。

5,清除浮动带来的影响的方法

(1),使用clear:both

.father:after{/*IE7和IE6不识别*/

content:''

display:block

clear:both

overflow:hidden

height:0

}

.father{

*zoom:1/*兼容IE7*/

}

(2),内部使用空标签

div{clear:both}

缺点是多了一个空标签,无意义。

(3),使用BFC

在子元素中使用overflow,position,inline-block,tabel-cell

(4),使用table

.father:after{/*IE7和IE6不识别*/

content:''

display:table

clear:both

}

.father{

*zoom:1/*兼容IE7*/

}