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. pyspark 读写csv、json文件

    from pyspark import SparkContext,SparkConf import os from pyspark.sql.session import SparkSession de ...

  2. Oracle RAC集群搭建(zero)--全是报错

    1. 提示Check if the DISPLAYvariable is set.    Failed<<<< 解决方案: #xhost +  //切换到root用户输入 #s ...

  3. 设置IIS允许下载.config文件

    <configuration> <system.webServer>        <security>            <requestFilteri ...

  4. Linux抓包工具：tcpdump

    tcpdump 是一个命令行实用工具,允许你抓取和分析经过系统的流量数据包.它通常被用作于网络故障分析工具以及安全工具. tcpdump 是一款强大的工具,支持多种选项和过滤规则,适用场景十分广泛.由 ...

  5. BNU34058——干了这桶冰红茶！——————【递推】

    干了这桶冰红茶! Time Limit: 1000ms Memory Limit: 65536KB 64-bit integer IO format: %lld      Java class nam ...

  6. backbone应用笔记

    由于公司手机端web的需要,最近开始用上backbone,之前觉得很难学,也一直没看到前端mvc具体是个啥,后来由于项目紧急,就抽空看了一遍underscore和backbone的源码,收获还是蛮大的 ...

  7. could not find an installed version of gradle either in android studio

    问题描述: 很多人在Ionic升级到3之后,无缘无故发现,当我们添加android平台后,build或者run的时候,命令行窗口给我们提示: 如果在Ionic2时add的android platfor ...

  8. JavaScript字符串去除空格

    /*字符串去除空格*/ String.prototype.Trim = function() { return this.replace(/(^\s*)|(\s*$)/g, "") ...

  9. 【转载】BootStrap表格组件bootstrap table详解

    (转载,来源“脚本之家”,作者不详) 一.Bootstrap Table的引入 关于Bootstrap Table的引入,一般来说还是两种方法: 1.直接下载源码,添加到项目里面来.由于Bootstr ...

  10. flex布局的一些注意点

    现在来总结下自己在项目中用flex布局的一些注意点 1.ui图中的布局方式与justify-content的布局方法不一样 这是就要利用flex-grow的空dom来分开子容器来达到页面布局的效果 2 ...