咸鱼前端—CSS浮动

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_45020839/article/details/96104603

浮动(float)

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制,移动到其父元素中指定位置的过程。

在CSS中,通过float属性来定义浮动,其基本语法格式如下:

选择器{float:属性值;}
属性值 描述
left 元素向左浮动
right 元素向右浮动
none 元素不浮动(默认值)
浮动特性

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

浮动首先创建包含块的概念(包裹)。就是说, 浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。

在这里插入图片描述

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

在这里插入图片描述

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

元素添加浮动后,元素会具有行内块元素的特性。元素的大小完全取决于定义的大小或者默认的内容多少浮动根据元素书写的位置来显示相应的浮动。

总结:

浮动的目的就是为了让多个块级元素同一行上显示。

float

  1. 加了浮动的元素盒子是浮起来的,漂浮在其他的标准流盒子上面。

  2. 加了浮动的盒子,不占位置的,它浮起来了,它原来的位置漏 给了标准流的盒子。

  3. 特别注意,首先浮动的盒子需要和标准流的父级搭配使用, 其次 特别的注意浮动可以使元素显示模式体现为行内块特性。

布局流程

为了提高网页制作的效率,布局时通常需要遵守一定的布局流程,具体如下:

1、确定页面的版心(可视区)。

2、分析页面中的行模块,以及每个行模块中的列模块。

3、制作HTML结构 。

4、CSS初始化,然后开始运用盒子模型的原理,通过DIV+CSS布局来控制网页的各个模块。

一列固定宽度且居中
在这里插入图片描述

最普通的,最为常用的结构

两列左窄右宽型
在这里插入图片描述

通栏平均分布型

在这里插入图片描述

展开阅读全文

没有更多推荐了,返回首页