css013 构建基于浮动的布局

css013 构建基于浮动的布局

基于浮动的布局时利用float属性是网页上的元素并排，并创建列

float有三个值：left 、right 、none

1、假设要把一张图片浮动到网页的左侧

.float-left{

   float:eft;

}

假如要把一个装满内容的<div>浮动到一边，形成一个侧边栏

.sidebar{

   float:left;

   width:150px;

}

2、设计一个简单的两列布局需要的几个步骤

a、 把每列都包在一个带有ID或class属性的<div>标签里面

b、把侧边栏<div>浮动到左侧或者右侧

c、 给浮动的侧边栏设定一个宽度

宽度可以是一个固定的尺寸，也可以是基于浏览器窗口宽度的弹性设置，使用百分比。

d、     给正文添加一个margin-left

（要仔细弄明白了）

 

一、    用浮动进行布局

1、让所有的列都浮动让所有的列浮动时要注意每一列的宽度，列宽度总和应该小于总宽度

2、在浮动元素中浮动 

3、在浮动元素中浮动

二、    克服浮动问题

1、清除浮动和保持浮动

a、 在<div>的底部添加一个清除元素

b、浮动外围元素：让浮动元素的<div>也浮动起来

c、 利用overflow:hidden; (如果容器中有绝对定位的元素，它们可能会显示不出来。例如：当一个下拉菜单中有另一个标签或者下拉菜单时，就会显示不出来)

d、   使用Mico Clear Fix

利用html分区元素，添加一个类，如：

<div class=”clear”>

在css中写：

.clear{

  clear:both;

}

2、多列布局

三、    多列的布局

1、设置列项目：column-count

设置列列之间的间隔：column-gap

在列之间绘制一条直线：column-rule

如：给这个类定义一个名为：multicol的类，创建一个3列的布局，间隔为1em ，并添加一条黑色的虚线

. multicol{

    column-count:3;

    column-gap:1em;

    column-rule:1px dotted black;

}

3、创建全网页高度的列

假设有个3列的设计，第一列为25%宽，第二列有50%，第三列有25%。你想让背景色为红白蓝。

<div class="wrapper">

     <div class="sidebar1">hello everyone!</div>

     <div class="main">i am the main content</div>

     <div class="sidebar2">nice to meet you!</div>

</div>

添加一个线性渐变，让颜色站与列的宽度相匹配

 .wrapper{

     background-color: linear-gradient(left,

            red:0%,

            red:25%,

            white:25%,

            white:75%,

            blue:75%,

            blue:100%);

}

添加供应商版本的代码：

         ……

4、防止浮动下落

浮动下落（float drop）总是犹豫没有组否的空间容纳所有的列才造成的

5、用box-sizing防止浮动下落

box-sizing的三个值分别如下：

a、 content-box

b、  box-sizing：content-box

屏幕宽度为width属性值+padding值+border值

c、 padding-box

box-sizing：padding-box

          屏幕宽度为width属性值+padding值

d、           border-box

box-sizing：border-box

屏幕宽度为width属性值+border值