CSS 浮动

CSS 浮动

标准流

标准流也叫文档流，指的是标签在页面中默认的排布规则，如：块元素独占一行，行内元素可以一行显示多个

浮动

基本使用

作用：让块元素水平排列

属性名：float

属性值	说明
left	元素向左浮动
right	元素向右浮动
none	默认值，元素不浮动
inherit	继承父元素的 float 属性值

特点

• 浮动元素顶对齐
• 浮动后的元素具备行内块特点
• 浮动元素会脱离标准流（脱标）

浮动的影响

浮动元素会脱标，如果父级没有高度，子级无法撑开父级高度（可能导致页面布局错乱），因此需要清除浮动

案例

<style>
	.top {
     
      margin: 50px auto;
      width: 1200px;
      /* height: 300px; */
      background-color: skyblue;
    }

    .left {
     
      float: left;
      width: 200px;
      height: 300px;
      background-color: violet;
    }

    .right {
     
      float: right;
      width: 950px;
      height: 300px;
      background-color: aqua;
    }

    .bottom {
     
      height: 100px