CSS — flaot浮动的原因与副作用

flaot浮动的原因与副作用

float中的四个参数

left,right,none,inherit

float 浮动的原因

使用浮动之后,元素会脱离标准的文档流。(标准的文档流就是按照不同的元素种类,如块元素,行元素按照各自的特点去排列显示,虽然属性不同,但都是按照从上到下,从左到右的顺序进行排列)

float 浮动的副作用

  • 两个块级元素,会被浮动元素覆盖
    CSS — flaot浮动的原因与副作用_第1张图片
<style type="text/css">
    .box{
      border: 4px solid #000000;
      width: 200px;
      height: 200px;
      display: inline-block;
    }
    .itemSmall_1{
      background-color: chartreuse;
      width: 40px;
      height: 40px;
      border: 2px solid #000000;
      /* float: left; */
    }
    .itemSmall_2{
      background-color: chartreuse;
      width: 40px;
      height: 40px;
      border: 2px solid #000000;
      float: left;
    }
    .itemBig{
      background-color: blue;
      width: 150px;
      height: 150px;
      border: 2px solid #000000;
    }
  style>
<body>
    <div class="box">
      <div class="itemSmall_1">

      div>
      <div class="itemBig">

      div>
    div>
    <div class="box">
      <div class="itemSmall_2">

      div>
      <div class="itemBig">

      div>
    div>
  body>

*一个块元素,一个行内元素。行内元素如文字会浮动在浮动元素的周围,为浮动元素留出空间。
CSS — flaot浮动的原因与副作用_第2张图片

<style type="text/css">
    .box{
      border: 4px solid #000000;
      width: 200px;
      height: 200px;
      display: inline-block;
      vertical-align: top;
    }
    .itemSmall_1{
      background-color: chartreuse;
      width: 40px;
      height: 40px;
      border: 2px solid #000000;
      /* float: left; */
    }
    .itemSmall_2{
      background-color: chartreuse;
      width: 40px;
      height: 40px;
      border: 2px solid #000000;
      float: left;
    }
    .itemBig{
      background-color: blue;
      width: 150px;
      height: 150px;
      border: 2px solid #000000;
    }
  style>
  <body>
    <div class="box">
      <div class="itemSmall_1">
      div>
      <div class="itemBig">
      div>
    div>

    <div class="box">
      <div class="itemSmall_2">
      div>
      行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素行内元素
    div>
  body>

*两个块级元素浮动,出现父元素塌缩
CSS — flaot浮动的原因与副作用_第3张图片

<style type="text/css">
    .box{
      border: 4px solid #000000;
      float: left;
    }

    .itemSmall_2{
      background-color: chartreuse;
      width: 40px;
      height: 40px;
      border: 2px solid #000000;
      float: left;
    }`
    .itemBig2{
      background-color: blue;
      width: 150px;
      height: 150px;
      border: 2px solid #000000;
      float: left;
    }
  style>
  <body>
    <div class="box">
      <div class="itemSmall_2">
      div>
      <div class="itemBig2">
      div>
    div>
  body>

你可能感兴趣的:(前端知识积累)