float：就是在于布局，首先要介绍的是文档流（标准流），之后是浮动布局。

文档流：元素自上而下，自左而右，块元素独占一行，行内元素在一行上显示，碰到父集元素的边框换行。

浮动布局：

1、float:  left   |   right

2、元素浮动之后不占据原来的位置（脱标）

3、浮动的盒子在一行上显示

4、行内元素浮动之后转换为行内块元素。（不推荐使用，转行内元素最好使用display: inline-block）

浮动作用：

1、文本饶图

2、导航制作

3、网页布局

文本饶图：这里有个十分特殊的知识点，就是当红色的div浮动以后，虽然p元素也是块状元素，但是p标签并没有往上顶到红色的div下。这是因为float当初被开发出来就是为了解决文字环绕的问题。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <style>

        .box1 {

            width: 400px;

            height: 500px;

            background-color: yellow

        }

        .box2 {

            width: 200px;

            height: 200px;

            background-color: red;

            float: left

        }

    </style>

</head>

<body>

    <div class="box1" style="">

        <div class="box2"></div>

        <p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p>

        <p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p>

        <p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p>

        <p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p>

        <p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p>

        <p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p>

        <p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p>

        <p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p>

        <p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p>

        <p>你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊你是煞笔啊</p>

    </div>

</body>

</html>

效果：

导航制作：之前制作导航都是将文字放置于一个div中，然后设置它们的a标签为行内块。现在直接设置li为浮动就行了。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        body,ul,li{

            margin:0;

            padding: 0;

        }

        ul,li{

            list-style: none;

        }

        .nav{

            width: 800px;

            height: 40px;

            background: pink;

            margin: 20px auto;

        }

        .nav ul li{

            float: left;

        }

        .nav ul li a{

            display: inline-block;

            height: 40px;

            font: 14px/40px 微软雅黑;

            padding:0 20px;

            text-decoration: none;

        }

        .nav ul li a:hover{

            background: #aaa;

        }

    </style>

</head>

<body>

    <div class="nav">

        <ul>

            <li><a href="#">百度</a></li>

            <li><a href="#">百度一下</a></li>

            <li><a href="#">14期威武</a></li>

        </ul>

    </div>

</body>

</html>

效果：

CSS——float的更多相关文章

  1. 对css float 浮动的学习心得

    css float浮动详解 @(css float)[hasLayout|clear float|妙瞳] css float的定义和用法 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图 ...

  2. [CSS]float&clear浮动

    CSS float 属性 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样.  可取的值 ...

  3. [转] CSS float 浮动属性

    http://www.cnblogs.com/polk6/p/3142187.html CSS float 浮动属性 本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式: ...

  4. css float父元素高度塌陷

    css float父元素高度塌陷 float 使父元素高度塌陷不是BUG,反而是标准. float 原本是为了解决文字环绕才出现的. 当然有的时候要解决高度塌陷的问题 以下几个方法可以解决float ...

  5. css float left right 中间空间城数据无法显示

    css float left right 中间空间城数据无法显示 是由于设定了width具体值太小造成,简单用%值或不设置.

  6. 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子 ...

  7. CSS| 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级用css float浮动 而父级div没高度不能自适应高度 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层 ...

  8. 子级用css float浮动 而父级div没高度不能自适应高度

    子级对象使用css float浮动 而父级div不能自适应高度. 对父级div标签闭合</div>前加一个clear清除浮动对象. <!DOCTYPE html> <ht ...

  9. CSS Float（浮动）

    CSS Float(浮动) 一.CSS Float(浮动) CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. Float(浮动),往往是用于图像,但它在布局时一样非常 ...

  10. 子级用css float浮动 而父级不能自适应高度解决方法

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个 ...

随机推荐

  1. [bzoj1070][SCOI2007]修车[ 网络流]

    把每个工人拆成N个点.记为A[i,j]表示第i个工人修倒数第j辆车.每个车跟所有N*M个工人拆出的点连边.流量为1,费用为$time[i,j]*k$.源和每辆车连边,N*M个点和汇连边,流量都为1,费 ...

  2. spring boot jpa 事务管理

    spring boot 对jpa的支持极为方便,基本上不需要作太多配置,只需要加上注解就能支持事务: @Controller @Transactional(rollbackOn = Exception ...

  3. [codevs 1183][泥泞的道路（二分+spfa）

    题目:http://dev.codevs.cn/problem/1183/ 分析:这个和最优比率生成树很像,都可以二分答案的,只不过判定方面一个是求是否有最短路径,一个是求是否有生成树.假设等待判定的 ...

  4. python实现汉诺塔算法

    汉诺塔 算法分析 1.步骤1:如果是一个盘子,直接将a柱子上的盘子从a移动到c 否则 2.步骤2:先将A柱子上的n-1个盘子借助C移动到B(图1) 已知函数形参为hanoi(n,a,b,c),这里调用 ...

  5. ZooKeeper实现配置中心的实例（原生API实现）（转）

    说明:要实现配置中心的例子,可以选择的SDK有很多,原生自带的SDK也是不错的选择.比如使用I0Itec,Spring Boot集成等. 大型应用通常会按业务拆分成一个个业务子系统,这些大大小小的子应 ...

  6. MAPZONE GIS SDK接入Openlayers3之一——矢量数据集接入

    在选择开源前端GIS框架的时候,定下来MapBox和Openlayers3.起初被MapBox美观的地图显示效果所吸引,研究后发现其实现机制与MAPZONE GIS SDK相差深远,不如Openlay ...

  7. hp 1810-24g switch reset

    Specific steps to execute the factory default reset on the switch are: 1. Using a small, thin tool w ...

  8. UVa 12279 - Emoogle Balance

    题目:给你n个数字推断.零和非零数字的个数差. 分析:简单题. 读入数据非零+1.为零-1. 说明:目标650题╮(╯▽╰)╭. #include <iostream> #include ...

  9. LeetCode 941. Valid Mountain Array (有效的山脉数组)

    题目标签:Array 题目给了一组int array A,让我们判断它是否是 一个山脉数组. 山脉数组一定要有一个最高值,然后要同时有 山坡和下坡. 想法是,从左边开始依次比较两个数字,int[0] ...

  10. js 里面的 function 与 Function

    function 是 js 的标识符 Function 是 js 里面的一个 构造函数 1.new function 与 new Function 的区别 new 运算符在 js 里面是 创建一个自定 ...