CSS——浮动

CSS布局的三种机制

网页布局的核心–就是用CSS来摆放盒子
CSS提供了三种机制来设置盒子的摆放位置,分别是**普通流(标准流)、浮动和定位,**其中:

  1. 普通流(标准流)
    块级元素会独占一行,从上到顺序排列;
    常用元素: div、hr、p、h1-h6、ul、ol、dl、form、table
    行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行;
    常用元素:span、a、i、em等

  2. 浮动
    让盒子从普通流中浮起来,主要作用让多个盒子一行显示。

  3. 定位
    将盒子定在浏览器的某一个位置—CSS离不开定位,特别是JS特效

CSS浮动
1、什么是浮动

概念: 元素浮动是指设置了浮动属性的元素会

  • 脱离标准普通流的控制
  • 移动到指定位置

作用

  • 让多个盒子(div)水平排列成一行,使得浮动成为布局的重要手段
  • 可以实现盒子的左右对齐等
  • 浮动最早是用来控制图片,实现文字环绕图片的效果

语法:
在CSS中,通过float属性定义浮动

  选择器 {float: 属性值;}
属性值描述
none元素不浮动(默认值)
left元素向左浮动
right元素向右浮动
  1. 浮动在普通流之上,脱离标准流
  2. 浮动的盒子,把自己原来的位置给下面标准流,就是不占有原来的位置。
  3. 浮动元素会改变display属性,类似转换为了行内块,但元素之间没有空白缝隙
    <style>
        .one {
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;

        }
        .two {
            width: 300px;
            height: 300px;
            background-color: purple;

        }
    </style>

用浮动的核心目的是让多个盒子在同一行显示
浮动是脱标的,会影响下面的标准流元素,此时,需要给浮动的元素添加一个标准流父亲,最大化减小对其他标准流的影响

主要导航栏:**ul ——>li——> a **

2、浮动的拓展
  1. 浮动元素与父盒子的关系
    子盒子的浮动参照父盒子的浮动
    不会与父盒子的边框重叠,也不会超过符合紫的内边距

  2. 浮动元素与兄弟盒子的关系
    在一个父级盒子中,如果前一个盒子是:
    浮动的,那么当前盒子会与前一个盒子的顶部对齐;
    普通流的,那么当前盒子会显示在前一个兄弟盒子的下方。
    浮动只会影响当前或者是后面的盒子,不会影响前面的标准流。

©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页