温江做网站

咨询热线：

028-86922220

×

01

关于我们

02

服务项目

高端网站建设

网络营销服务

电商网站定制

生物医药网站建设

外贸网站建设

教育培训网站建设

03

小程序开发

小程序开发

04

案例展示

网站建设案例

小程序案例

电商平台案例

系统平台案例

05

建站动态

小程序开发

外贸网站建设

APP软件开发

06

联系我们

地址：成都市太升南路288号锦天国际A幢1002号

电话：028-86922220

028-86922220

新网创想网站建设，新征程启航

为企业提供网站建设、域名注册、服务器等服务

css浮动的特性有哪些

小编给大家分享一下css浮动的特性有哪些，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名申请、网站空间、营销软件、网站建设、武陵源网站维护、网站推广。

块元素在文档流中默认垂直排列，所以多个div从上至下依次排开

如果希望块元素在页面中水平排列，可以使用float来使元素浮动，从而脱离文档流,元素脱离文档流以后，它下边的元素会立即向上移动

css浮动的特性

1.浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围

2.元素浮动以后，会尽量向页面的左上或这是右上漂浮,直到遇到父元素的边框或者其他的浮动元素

3.如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素

4.浮动的元素永远不会超过他上边的兄弟元素,最多一边挤

5.块元素脱离文档流以后,默认的高度和宽度都丢失.高宽会被内容撑开(不再是默认的占父元素100%)(这是脱离文档流的特点,不仅仅是浮动才会这样)

6.内联元素脱离文档流后,会变成块元素(所有元素一旦脱离文档流.全都会变成块元素)




    box1左浮动

box2左浮动

box3右浮动(为什么不到右上角?)

web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，PDF）

浮动的影响与清除浮动

在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。

但是子元素浮动后,因为脱离了文档流,所以子元素无法撑起父元素的高度.导致父元素高度消失.后面的元素都将会向上移动.最终导致页面布局混乱。

清除浮动方法1(针对父子元素)：

给父元素指定一个高度直接写死（不推荐）

清除浮动方法2(针对父子元素)：

给父元素开启BFC。

清除浮动方法3:清除浮动clear(针对兄弟元素)

clear可以用来清除其他浮动元素对当前元素的影响,仅仅是清除影响,清除浮动后.元素会回到其他元素浮动之前的位置

如果前面的元素是左浮动:clear:left

如果前面的元素是右浮动:clear:right

| 值 | 描述 |
| left | 在左侧不允许浮动元素。 |
| right | 在右侧不允许浮动元素。 |
| both | 在左右两侧均不允许浮动元素。(清除对元素影响最大的那个元素浮动) |
| none | 默认值。允许浮动元素出现在两侧。 |
| inherit | 规定应该从父元素继承 clear 属性的值。 |

清除浮动导致高度塌陷问题(父子元素)：

可以直接在高度塌陷的父元素的最后，添加一个空白的div,并设置clear

但是此方法会添加冗余代码.因此可使用css进行添加伪元素:

.父元素:after{
content:"";
display:block;
clear:both;
}

以上是“css浮动的特性有哪些”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

本文标题：css浮动的特性有哪些
URL地址：http://wjwzjz.com/article/ppiiej.html

其他资讯

分享至：

公司简介发展历程

高端网站建设小程序开发 APP开发网络营销

行业新闻建站学堂常见问题

公司地址人才招聘

成都



电话：028-86922220



地址：成都市太升南路288号锦天国际A幢1002号

版权所有：成都新网创想广告设计中心（普通合伙）蜀ICP备11025516号-13

服务热线：028-86922220