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. jsp内置对象(转)

    JSP中一共预先定义了9个这样的对象,分别为:request.response.session.application.out.pagecontext.config.page.exception 1. ...

  2. git远程上传文件

    [第一步]建立先仓库 第一步的话看一般的提示就知道了,在github新建一个repository(谷歌可以解决),都是可视化的界面操作,所以难度不大.或者看这里:https://help.github ...

  3. android混合动画实现

    在android开发,我们会常常使用到动画,可是简单的一种动画(如旋转.缩放.渐变.位移等)有时候并不能满足我们项目的要求,这时候就须要运用到混合动画.那么在安卓中是怎样实现一个炫酷的混合动画,以下是 ...

  4. 行香子&#183;过尽千山

    <行香子·过尽千山> 文/天地尘埃2020 过尽千山.水瘦山寒. 思来路.地咽天玄. 千金散尽,欲补穹天. 但孟春暖,仲春炫.暮春喧. 三皇五帝,魏武挥鞭. 朴无欲.衡玉玑璿. 金生丽水, ...

  5. wepack使用

    当前使用的版本:webpack 4.5. ⚠️webpack 是需要有 node 环境的,所以在使用之前需要保证你当前安装的有 node. 安装 webpack: npm install webpac ...

  6. HDU1171_Big Event in HDU【01背包】

    Big Event in HDU Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  7. Android 使用MediaRecorder录音调用stop()方法的时候报错【转】

    本文转载自:http://blog.csdn.net/u014737138/article/details/49738827 这个问题在网上看到了太多的答案,一直提示说按照官网的api的顺序来,其实解 ...

  8. XAML实例教程系列 - 事件(Event) 五

    Kevin Fan分享开发经验,记录开发点滴 XAML实例教程系列 - 事件(Event) 2012-06-19 01:36 by jv9, 1727 阅读, 7 评论, 收藏, 编辑 Events, ...

  9. 转 美制电线标准AWG与公制、英制单位对照

    在以太网和xDSL接入网设计中,经常会碰到诸如24AWG.26AWG等等表示电缆直径的方法.其实AWG(American Wire Gauge)是美制电线标准的简称,AWG值是导线厚度(以英寸计)的函 ...

  10. LVS上DR和NAT模式的缺陷

    引言 相信一般的小公司用的最多的还是DR和NAT模式,关于DR和NAT模式的原理请看看下图,我们先从lvs的DR和NAT模式特性聊聊一些问题. 问题1.lvs的DR模式和NAT模式核心缺陷有哪些? D ...