浮动布局

为什么需要浮动?

每个网页都有很多的布局效果,标准流没有办法完成,此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式。

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

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

什么是浮动?

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

语法:

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

浮动特性-脱标

设置了浮动(float)的元素最重要的特性:

  1. 脱离标准普通流的控制(浮),移动到指定位置(动)。俗称脱标。
  2. 浮动的盒子不再保留原来的位置(因为浮动飘起来了),标准流盒子会占据它的位置。

浮动元素会具有行内块元素特性

任何元素都可以浮动。不管原先是什么模式的元素,添加浮动之后具有行内块元素相似的特性

版权声明:本文为本站原创文章,由37.2℃发表,转载请注明出处,保留一切权利!

转载请注明:转载于37.2度云笔记

发表评论

您的电子邮箱地址不会被公开。

微信