一、了解float属性

块元素在文档流中会独占一行,自上而下排列,如果设置元素浮动,元素脱离文档流后,就不会具有元素的特点

float:设置元素的浮动

可选值:

none ; 元素正常显示,不浮动(默认值)

left  ;   元素向左浮动

right ;   元素向右浮动

浮动可以使块元素水平布局

例:设置元素左浮动

<style>
       #outer {
        width: 500px;
        height: 600px;
        background-color: #ccc;
        margin: 50px auto;
      }
      .box{
        width: 100px;
        height: 100px;
        background-color: red;
        display: inline-block;
      }
      .box1{
        float: left;
      }
      .box2{
        width: 100px;
        height: 100px;
        background-color: green;
        float: left;
      }
      .box3{
        background-color: indigo;
        float: left;
      }
    </style>
    <div id="outer">
        <div class="box1 box"></div>
        <div class="box2 box"></div>
        <div class="box3 box"></div>
      </div>

android float类型 控制小数点后几位 float怎么设置_块元素

二、float浮动的特点

设置float浮动的特点(1)

1.设置元素浮动之后,元素会脱离文档流,元素原来在文档流中的位置就不会存在,下面的元素就会上移,挤上去

2.设置元素浮动之后,元素尽量向左或向上进行移动,而且默认情况下,不会脱离父元素的范围

3.设置浮动的元素不会超过他前一个兄弟,最多是一边齐

4.如果浮动元素前一个兄弟没有浮动,则浮动元素不会超过他前面没有浮动的元素

总结:浮动主要是用于元素的水平布局

设置float浮动的特点(2)

当浮动元素遇到文字,浮动元素不会覆盖文字,而是文字会环绕在浮动元素的周围,从而实现文字环绕图片的效果

注:这是浮动最早的功能,只是后面用于水平布局

例:

<style>
      #box{
        width: 400px;
        height: 400px;
        border: 1px solid red;
      }
      .box1{
        width: 100px;
        height: 100px;
        background-color: green;
        float: left;
      }
    </style>

   <div id="box">
        <div class="box1"></div>
        <p class="p1">
          者活有间韩斗谓先今德恶,舟九和,子郭章国极的非花郭不,否宫的娘生第白廿对其头羊,为即甲总保你心能和觉程上胜临韩,变感清应说人为,十尤陛救千烦才秦然两九不事应太苦败答,此洪道胜怒,洪谓五以斯作秦,花败纯破不足,弟我久锐到使姑己不死有到感有考中措时,的是只接。
          韩样统感牙范币否自了,骨讨到灰面,爱卑易,帝此娘沾全他死,帝日满与留罪,衣惜到太落千不撒,么活上己韩一一人者官准只尘特,准同王尽统航王仃活无,能快死生天洋磊,专处耳非的诗得五安谋兮里制联交,同领之会变最杀的逃别他我她才,判兼哥也当商法说身司弟搏切皮六瞠骨。
        </p>
      </div>

android float类型 控制小数点后几位 float怎么设置_html_02

 

设置浮动的特点(3)

元素在文档流当中:

      块元素  : 独占一行

      行内元素 : 不会独占一行,不能自定义设置宽高

      行内块元素 :兼具块元素,行内元素的特点

元素脱离文档流了,就不再区分块,行内,行内块,也就不具有以上的特点元素也不会独占一行了,也可以设置宽高了等等