0

0

关于CSS浮动的详细介绍

高洛峰

高洛峰

发布时间:2017-03-20 16:11:31

|

2183人浏览过

|

来源于php中文网

原创

1.标准流就是浏览器默认布局的方式,也就是从上往下,从左向右的默认的排班布局的方式。

关于CSS浮动的详细介绍

2.布局方式

  2.1浮动的本质:解决图片与文字并排的格式问题。

  *元素浮动后,会脱离标准流,影响其布局。

立即学习前端免费学习笔记(深入)”;

  2.1.1未设置浮动前(before):

  关于CSS浮动的详细介绍

 

  2.1.2.设置浮动后(after)

  关于CSS浮动的详细介绍

* {
                padding: 0;
                margin: 0;
            }

            .box1 {
                width: 50px;
                height: 40px;
                background-color: #AFEEEE;
                border: 2px solid #3C3C3C;
                float: left;
            }
            
            .box2 {
                width: 300px;
                height: 300px;
                background-color: #ADFF2F;
                border: 2px solid #3C3C3C;
                
            }

  *浮动的元素会不占据标准流的空间。但是会影响标准流中的文本的排版。

3.浮动的特性

  3.1.浮动脱离标准流,不占位置,会影响标准流。浮动只有左右浮动。

  3.2.浮动的元素A排列位置,跟上一个元素(块级)有关系。如果上一个元素有浮动,则A元素顶部会和上一个元素的顶部对齐;如果上一个元素是标准流,则A元素的顶部会和上一个元素的底部对齐。

  3.3.一个父盒子里面的子盒子,如果其中一个子级有浮动,则其他子级都需要浮动,才能一行对齐显示。

思高网络商城CycooShop
思高网络商城CycooShop

主要模块:首页商品推荐 /顾客留言发布 /商品分类浏览 /按商品分类、关键字搜索商品 /商品购物车 人信息中心 /显示商品详细介绍以及多图片显示功能 /商品类别管理有分大类中类的类别设定商品搜索类别设定 /商品管理有临时关闭不在线功能 /订单管理 /支付类型管理模块 留言管理 /后台权限分级管理 /密码修改 /新闻管理 /网站配置管理 /滚动广告管理v1.58更新:1、增强支付接口设置。2、内置支

下载

  3.4.浮动根据元素书写的位置来显示相应的浮动。

  3.5.元素添加浮动后,如果没有设置宽高,元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或默认的内容多少,即具有包裹性。

  3.6.浮动具有破坏性:元素浮动后,破坏原来的正常流布局,造成内容坍塌。

注意:如果一个标准流的父盒子没有设置高,所有子盒子进行浮动,那父盒子的高度会塌陷为0;

4.解决浮动破坏性造成的高度塌陷问题

  4.1.overflow方法:在父盒子上设置overflow:hidden;(使其具有包裹性)

  关于CSS浮动的详细介绍



    
        
        溢出处理案例
        
    
    
        
overflow:auto;**minking 的博客minking 的博客minking 的博客

overflow: hidden;**minking 的博客minking 的博客minking 的博客

overflow: visible;**minking 的博客minking 的博客minking 的博客

overflow: scroll;**minking 的博客minking 的博客minking 的博客

 

5.补充:BFC

  Overflow可以触发元素的BFC,可以让元素具有独立的排版的空间和权限,在bfc内部所有的元素都依据父元素进行排版和布局,所有父元素具有了包裹性,这就是解决高度塌陷问题的原理。

比如: 浮动也可以触发bfc,再有:定位、overflow、display:table、table-cell...

6.版心:网站的核心显示区,一般居中显示。宽度有:960px 980px 1000px 1190px 1200px;

7.浮动的清除:让当前元素左右两边都不存在浮动元素时才把元素放在标准流中显示。

**********clear:left/right/both; 

相关专题

更多
vlookup函数使用大全
vlookup函数使用大全

本专题整合了vlookup函数相关 教程,阅读专题下面的文章了解更多详细内容。

26

2025.12.30

金山文档相关教程
金山文档相关教程

本专题整合了金山文档相关教程,阅读专题下面的文章了解更多详细操作。

28

2025.12.30

PS反选快捷键
PS反选快捷键

本专题整合了ps反选快捷键介绍,阅读下面的文章找到答案。

25

2025.12.30

表格中一行两行的方法
表格中一行两行的方法

本专题整合了表格中一行两行的相关教程,阅读专题下面的文章了解更多详细内容。

3

2025.12.30

cpu温度过高解决方法大全
cpu温度过高解决方法大全

本专题整合了cpu温度过高相关教程,阅读专题下面的文章了解更多详细内容。

5

2025.12.30

ASCII码介绍
ASCII码介绍

本专题整合了ASCII码相关内容,阅读专题下面的文章了解更多详细内容。

31

2025.12.30

GPS是什么
GPS是什么

本专题整合了GPS相关内容,阅读专题下面的文章了解更多详细内容。

3

2025.12.30

wifi拒绝接入
wifi拒绝接入

本专题整合了wifi拒绝接入相关教程,阅读下面的文章了解更多详细方法。

9

2025.12.30

丰网速运介绍
丰网速运介绍

本专题整合了丰网速运查询入口以及相关内容,阅读专题下面的文章了解更多内容。

3

2025.12.30

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 0.9万人学习

前端基础进阶-移动Web
前端基础进阶-移动Web

共187课时 | 21.2万人学习

Vue.js 开发基础教程
Vue.js 开发基础教程

共33课时 | 7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号