关注互联网应用及运维技术的个人博客

CSS中使用Float浮动使网页布局产生变化

CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。

Float(浮动),往往是用于图像,但它在布局时一样非常有用


传统网页布局的三种方式

网页布局的本质——用CSS来摆放盒子,把盒子摆放到相应的位置

CSS提供了三种传统布局方式(简单说,就是盒子的排列顺序):

  • 标准流
  • 浮动
  • 定位

标准流

所谓标准流,就是标签按照规定好默认方式排列

  1. 块级元素会独占一行,从上向下顺序排列
  2. 行内元素会按照顺序,从左到有顺序排列,碰到父元素边缘则自动换行

以上都是标准流布局,标准流是最基本的布局方式

三种布局方式都是用来摆放盒子的,盒子摆放到合适位置,布局自然就完成了

在实际开发中,,一个页面基本都包含了这三种布局方式


为什么需要浮动

很多的局布局效果,标准流没有办法完成,此时就可以利用浮动完成布局,因为浮动可以改变元素标签的默认排列顺序

浮动的典型应用:可以让多个块级元素一行内排列显示

网页布局第一准则:多个块级元素纵向排列用标准流,多个块级元素横向排列用浮动


什么是浮动

float 属性用于创建浮动框,将其移动到一边,知道左边缘或右边缘触及包含块或另一个浮动框的边缘

语法:

选择器 {float: none|left|right;}
  • none:元素不浮动(默认值)
  • left:元素向左浮动
  • right:元素向右浮动

举例:

当有两个盒子,一个左浮动一个右浮动时,两个盒子会分别贴在浏览器的左边缘或右边缘

当两个盒子都向左浮动时,两个盒子会紧紧挨在一起


浮动特性

加了浮动之后的元素,会具有很多特性:

  • 浮动元素会脱离标准流(脱标)
    1. 脱离标准普通流的控制(浮) 移动到指定位置(动)
    2. 浮动的盒子不再保留原先的位置 (元素浮到上面一层来了,原来的位置就空了,其他元素占有了这个位置)

举例:

现有两个盒子,当一个盒子设置了左浮动,另一个盒子没有浮动时,浮动的盒子会遮住没有浮动的盒子

  • 浮动的元素会在一行内显示并且元素顶部对齐
    1. 如果多个盒子都设置了浮动,他们会按照属性值一行内显示并顶端对齐排列
    2. 浮动的元素是相互贴在一起的(不会有缝隙),如果父级元素的宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐

举例:

现有四个盒子,每个盒子宽度500px,高度300px,最后一个盒子会被挤到第二行

  • 浮动元素会有行内块元素的特性任何元素都可以浮动,不管原先是什么模式的元素,添加浮动之后具有行内块元素相似的特性
    1. 如果盒子没有设置宽度,默认和父级元素一样宽,但是添加浮动后,它的大小根据内容来决定
    2. 浮动的盒子中间是没有缝隙的,是紧挨着的
    3. 行内元素同理

浮动元素经常和标准流父级搭配使用

为了约束浮动元素位置我们网页布局一般采取的策略是:先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置,符合网页布局第一准则

赞(0)
未经允许不得转载:飞天狒狒 » CSS中使用Float浮动使网页布局产生变化

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址