Day 14 CSS <网页布局-浮动布局>

浮动属性float用於创建浮动

使其移动到另一边 直到左或右边缘触及包含块或另一个浮动框的边缘

语法 :

    选择器{float:属性值;}
    /* 
    none 不浮动
    left 向左浮动
    right 向右浮动
    */

浮动的特性

加了浮动之後的元素会具有其他的特性

a. 浮动元素会脱离标准布局方式

脱离标准布局方式的控制移动到指定位置

且浮动个盒子不再保留原先的位置

b. 浮动的元素会一行内显示且元素顶部对齐

如果给盒子都设置了浮动则盒子会按照属性值，变为一行内显示并且顶端对齐排列

注意 :

• 浮动的元素是互相贴靠再一起的(不会有缝隙)
• 如果父级宽度装不下盒子多出的盒子将会另起一行对齐

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

任何元素都可以浮动，不管原本是什麽模式的元素

添加浮动後皆会具有行内块元素相似的特性

• 如果块级盒子没有设置宽度，默认宽度和父级一样宽

但是设置成浮动元素後 大小则会根据内容来定(行内块元素)

• 浮动的盒子中间没有缝隙，是紧贴在一起的
• 行内元素同理

浮动的备注

浮动元素经常和标准布局方式搭配使用

为了约束浮动元素位置，网页布局一般采取的方式是 :

先用标准布局的父元素排列上下位置，之後内部子元素采取浮动排列左右位置

浮动 - - - codepen