CSS float浮动布局

html-css033

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是前端基础技能之一，而CSS最重要的功能就是网站布局。

CSS布局方式有很多，从远古时代的table（表格）布局-->float（浮动）布局-->position（定位）布局-->flex（弹性）布局-->grid（网格）布局（还未正式推出），下面咱们简单谈一谈各种布局的用法及其优缺点。

table布局就是将网站当做一个表单来做，这里不做展开，因为现在基本不这么用了。

float：浮动。float刚开始并不是为了用来网页布局，而是用来解决图文信息中图片与文本冲突的问题的。

如下图：

这种常见的图文效果，没有float之前是很难达到的。有了float之后只需要加一个float：left，轻松搞定。

‘咦，如果float可以处理图文的问题，那用来布局不也可以吗？’，后来有人用float试着用于网页布局，还真的可以。

网页中最常见的布局如下：

用float做

比table布局要方便不少，不过float随之而来的带来了 “浮动高度塌陷”的问题：

如果浮动元素的父元素没有设定高度，当其子元素浮动后，父元素就因为内部没有子元素撑起从而高度变为0；

引申：网页元素一般分为 普通流，浮动流，定位流。其中普通流和浮动流在一个层级上，定位流>浮动流>普通流。

之后为了解决这个问题搞出来一系列清除“浮动高度塌陷”的策略方法，非常麻烦。

position：定位；顾名思义，就是确定位置。position同样可以用做网页布局。

同样的效果

不过position需要计算每一个元素的位置，而且这个位置是定死的，略显繁琐和笨重。实际上position我平常只用来定位一些小的标签之类的东西。position优点在于不像float那样会影响其他元素。

关键点：子绝父相。需要定位的元素用absolute绝对定位，其父元素用 relative相对定位。还有fixed固定定位，他是以html为父元素的定位。

flex：弹性；弹性布局很好的解决了float和position的问题，非常好用。

使用方法：

在父元素使用 display:flex确定弹性作用的范围。

然后

justify-content：center（space-around，space-between等）；水平方向布局；

align-items:center(flex-start,flex-end等)垂直方向布局；

不过flex不兼容IE8及以下的浏览器。

大部分情况下flex布局已经能满足需要，不过flex只能用作一维布局，也就是说，flex一次只能作用于一条线。如果想要进行二维布局，必须翻转坐标二次弹性，这样会显得不够优雅，这时候grid（网格）布局就发展起来了。

grid布局用法和flex相似，但是作用于二维布局。

先在父元素使用 display:grid确定网格作用范围；

然后

grid-template-columns: 40px 50px auto 50px 40px（行）

grid-template-rows: 25% 100px auto（列）

等等属性，这里只简单介绍，大家了解有这个东西就行。

在现实工作用，以flex为主，position辅助已经足够应对所有问题。

1、首先，如图所示，我在html中放置了两个iframe标签，没有额外的设置。如果浏览器直接打开，您可以看到iframe标签默认是水平排列的。

2、如果我将这两个iframe标签放在div标签中，我可以看到div标签默认垂直排列，也就是说，div标签会填充一行。

3、使用css将两个div标签的float设置为left。在此设置之后，两个标签水平排列。注意两个div后面的标签继续排列在这一行中，因为默认的div标签不会通过使用float来占用高度。

4、解决方案是在父div标签上放置两个div标签，然后将父标签的溢出设置为hidden。

5、使div标签水平显示的另一种方法是将其显示样式设置为内联块。

6、无论水平排列如何，当浏览器宽度太窄时，它会自动折叠，就好像它是垂直排列的一样。