float的特性一
.元素‘浮动’
.脱离文档流
.但不脱离文本流
首先看一个案例，直观的了解下float的特性
<style>

　　.container{

　　　　background: red;

　　　　width: 400px;

　　}

　　.p1{

　　　　background: green;

　　　　float: left;

　　　　width: 200px;

　　　　height: 50px;

　　}

</style>

<body>

　　<div class="container">

　　　　<span class="p1">float</span>

　　　　<div class="p2">

　　　　　　很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字

　　　　</div>

　　</div>

</body>

这个效果很明显就是，p1设置了向左浮动，高度50，宽度200，背景绿色。浮动之后有什么影响呢？我们上面注意点之一是脱离了文档流。

我们看到p2在使用的时候占据了p1的空间，跟container是一样的空间大小。但是他影响了p2文字的展现。整个文字都绕开了p1。这种布局方式就是float本身的一个含义。float本身就是用于图文环绕效果的。所以这个解释了上面的注意点，float元素脱离了文档流，但是不脱离文本流。

float的特性二
.对自身的影响：
　　.形成“块”（BFC）
　　　　比如上面的例子，p1这个float元素可以设置宽高。span元素本身是无法设置宽高的。上面的p1中，float属性一旦去除，宽高就会失效
　　.位置尽量靠上
　　.位置尽量靠左(右)
我们再看一个案例
<style>

　　.container{

　　　　background: red;

　　　　width: 400px;

　　}

　　.p1{

　　　　background: green;

　　　　float: left;

　　　　width: 200px;

　　　　height: 50px;

　　}

</style>

<body>

　　<div class="container">

　　　　<span>写几个字</span>

　　　　<span class="p1">

　　　　　　float

　　　　</span>

　　　　<span class="p1">

　　　　　　float

　　　　</span>

　　</div>

</body>

如图，首先看到的几个字，如果上面demo的p2一样。是一个正常的元素。我们说会尽量靠上和尽量靠左。所以是左上角的位置。再往下又有一个float元素，这两个float元素样式是一模一样的。但是那几个字是必须排的。所以他没办法越过那几个字。所以尽量靠上，靠左，就成了这副样子。

如果p1的宽度加起来小于 400减去字的长度，第二个元素就能往上。

如果，两个flaot元素长度加起来大于400了，他就会往下掉。。这就是尽量靠上，尽量靠左的含义。

float特性三
.对兄弟元素的影响
　　.上面贴非float元素（一般float元素上面贴的都是非float元素）
　　.旁边贴float元素（靠左，或者靠右的时候贴float元素）
　　.不影响其它块级元素位置
　　.影响其它块级元素内部文本（三四两点就是特性一说的脱离文档流，不脱离文本流）
.对父级元素的影响
　　.从布局上“消失”（相当于从父级的空间里面消失了，消失了意味着父级不会再管他的宽高）
　　.高度塌陷（因为在父级的空间里消失了，所以父级对高度有可能会塌陷，防止塌陷的办法就是overflow）
<style>

　　.float{

　　　　float: left;

　　　　width: 100px;

　　　　height: 100px;

　　　　background: red;

　　}

</style>

<body>

　　<div class="main">

　　　　<span class="float">

　　　　　　float元素

　　　　</span>

　　</div>

</body>

我们看到float元素的宽高是有100像素的，但是main的高度却是0，没有被撑起来。高度塌陷了,防止塌陷的常用办法就是设置overflow，创建一个BFC。

float两栏布局
<style>

　　.container{

　　　　width: 800px;

　　　　height: 200px;

　　}

　　.left{

　　　　float: left;

　　　　background: red;

　　　　width: 200px;

　　　　height: 100%;

　　}

　　.right{

　　　　background: blue;

　　　　margin-left: 200px;

　　　　height: 100%;

　　　　
　　　　padding-left: 10px;

　　}

</style>

<body>

　　<div class="container">

　　<div class="left">

　　　　左

　　</div>

　　<div class="right">

　　　　右

　　</div>

</div>

</body>

float三栏布局
<style media="screen">

　　html *{

　　　　padding: 0;

　　　　margin: 0;

　　}

　　.layout article div{

　　　　min-height: 100px;

　　}

</style>

<body>

　　<section class="layout float">

　　　　<style media="screen">

　　　　　　.layout.float .left {

　　　　　　　　float: left;

　　　　　　　　width: 300px;

　　　　　　　　background: red;

　　　　　　}

　　　　　　.layout.float .right{

　　　　　　　　float: right;

　　　　　　　　width: 300px;

　　　　　　　　background: blue;

　　　　　　}

　　　　　　.layout.float .center{

　　　　　　　　background: yellow;

　　　　　　}

　　　　</style>

　　　　<article class="left-right-center">

　　　　　　<div class="left"></div>

　　　　　　<div class="right"></div>

　　　　　　<div class="center">

　　　　　　　　<h1>浮动解决方案</h1>

　　　　　　　　1、这是三栏布局中间部分

　　　　　　　　1、这是三栏布局中间部分

　　　　　　</div>

　　　　</article>

　　</section>

</body>

布局方式-float布局的更多相关文章

  1. CSS布局方式--inline-block 布局

    布局其实就是想办法怎样将一些元素横向的排列起来,纵向由于块级元素的存在会自动占据一行. inline-block 元素会占据一行而且可以调整宽高很适合将这些元素排列在一行,而且使用 inline-bl ...

  2. CSS布局：Float布局过程与老生常谈的三栏布局

    原文见博客主站,欢迎大家去评论. 使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloa ...

  3. 转：CSS布局：Float布局过程与老生常谈的三栏布局

    使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为 ...

  4. 布局方式-flex布局

    .弹性盒子 .盒子本来就是并列的 .指定宽度即可 <style> .container { width: 800px; height: 200px; display: flex; bord ...

  5. inline-block布局方式

    刚研究了一下inline-block布局方式 inline-block布局方式是一种比float浮动更优的一种布局方式. 一个超简单的demo html: <!doctype html> ...

  6. Android 布局方式学习

    一.LinearLayout线性布局: 线性布局是程序中最常见的一种布局方式,线性布局可以分为水平线性布局和垂直线性布局两种, 通过android:orientation属性可以设置线性布局的方向 1 ...

  7. PyQt5四大布局方式

    1.绝对布局方式'''绝对布局方式,通过move的XY坐标方式来控制控件的位置'''from PyQt5.QtWidgets import *import sys,math class absolut ...

  8. Android布局方式总结

    Android的布局分别是:线性布局LinearLayout.相对布局RelativeLayout.帧布局FrameLayout.网格布局GridLayout.约束布局ConstraintLayout ...

  9. Html5 布局方式

    在Html5之前,统一采用的是Div+css的方式进行布局,但是却和开发人员的命名方式,喜好有关.在新的Html5中,布局却显得更加人性化,更易理解了.如增加了Header,Footer,Sectio ...

随机推荐

  1. docker jenkins安装（一）

    https://hub.docker.com/r/jenkins/jenkins  jenkins的docker官方镜像地址 https://jenkins.io/  jenkins官方网站 环境: ...

  2. Percona Mysql备份

    介绍 Percona是唯一一款开源.免费的mysql热备份工具,实现了对InnoDB数据库的非阻塞式的备份.有如下优势:1.完整.快速.可靠的备份2.备份期间不打断事务执行(innodb引擎)3.备份 ...

  3. RBAC基于角色的权限访问控制

      RBAC是什么,能解决什么难题?ThinkPHP中RBAC实现体系安全拦截器认证管理器访问决策管理运行身份管理器ThinkPHP中RBAC认证流程权限管理的具体实现过程RBAC相关的数据库介绍Th ...

  4. (转)Linux SSH批量分发管理

    Linux SSH批量分发管理 原文:http://blog.51cto.com/chenfage/1831166 第1章 SSH服务基础介绍 1.1 SSH服务 1.1.1SSH介绍 SSH是Sec ...

  5. HTML5之WebSocket && https://zhuanlan.zhihu.com/p/23467317

    在认识websocket之前,我们必须了解的是websocket有什么用? 他能解决我们遇到的什么问题? 如果没用,那么我们就么有使用它的必要的. websocket就是建立起全双工协议的,提高了效率 ...

  6. cmd激活win10

    自己动手,KMS激活win10 2016 长期服务版.步骤如下:命令提示符(管理员),依次输入以下3条命令 slmgr /ipk DCPHK-NFMTC-H88MJ-PFHPY-QJ4BJslmgr ...

  7. 0.数据结构(python语言) 基本概念 算法的代价及度量！！！

    先看思维导图: *思维导图有点简陋,本着循循渐进的思想,这小节的知识大多只做了解即可. *重点在于算法的代价及度量!!!查找资料务必弄清楚. 零.四个基本概念 问题:一个具体的需求 问题实例:针对问题 ...

  8. [Matlab] Galois Field arrays

    Operations supported for Galois Field arrays: + - - Addition and subtraction of Galois arrays. * / \ ...

  9. tornado基本使用【服务】

    1.安装 2.请求处理程序和请求参数 1.安装 pip install tornado 2.请求处理程序和请求参数 Tornado 的 Web 程序会将 URL 或者 URL 范式映射到 tornad ...

  10. 三种ajax解析模式！

    一.Ajax中的JSON格式 html代码: <html> <body> <input type="button" value="Ajax& ...