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. java将list<T>导出为xls文件

    一.action层 /** * 导出list */ @SuppressWarnings("unchecked") public void exportBatch() { reque ...

  2. (转)DB2 db2diag.log 日志分析

    DB2 db2diag.log 日志分析 原文:http://blog.csdn.net/lyjiau/article/details/52129997 db2diag.log是用来记录DB2数据库运 ...

  3. 牛客网Java刷题知识点之Map的两种取值方式keySet和entrySet、HashMap 、Hashtable、TreeMap、LinkedHashMap、ConcurrentHashMap 、WeakHashMap

    不多说,直接上干货! 这篇我是从整体出发去写的. 牛客网Java刷题知识点之Java 集合框架的构成.集合框架中的迭代器Iterator.集合框架中的集合接口Collection(List和Set). ...

  4. IE678910不兼容H5的placeholder属性，需要JS解决

    两种方法的思路 一.使用input的value作为显示文本 二.不使用value,添加一个额外的span标签,绝对定位覆盖到input上面. 两种方式各有优缺点,方法一占用了input的value属性 ...

  5. WPF 窗体在Alt+Tab中隐藏

    问题: 近段时间由于项目上的需求,需要在WPF中使用COM组件,并且由于软件界面设计等等原因,需要将部分控件显示在COM组件之上,由于WindowsFormsHost的一些原因,导致继承在WPF中的W ...

  6. springboot整合mongo多数据源

    该实例已测试 POM.XML <!-- Spring Boot mongodb 依赖--> <dependency> <groupId>org.springfram ...

  7. [转]Newtonsoft.Json高级用法

    本文转自:http://www.cnblogs.com/yanweidie/p/4605212.html 手机端应用讲究速度快,体验好.刚好手头上的一个项目服务端接口有性能问题,需要进行优化.在接口多 ...

  8. PLC通信网络

    PLC通信网络的分层 PLC通信网络大致可分为3层,管理层,单元层以及现场执行(AS-I)层.如下图所示. 在PLC通信网络的三层架构中,管理层,通信方式包括MPI,工业以太网(Profinet)以及 ...

  9. 关于“System.Data.ProviderIncompatibleException”类型的异常

    作为刚学习MVC的菜鸟,因为平常的不努力学习.看书,所以只能参考官方的教程学习操作新手入门 一步一步认真的做,前天晚上出现了一个关于数据库连接字符串错误的问题,自己查了很多资料, 问了许多大神,他们的 ...

  10. 在Android源码中如何吧so库打包编译进入apk， 集成第三方库（jar和so库）

    集成第三方so和jar包 include $(CLEAR_VARS) #jar包编译            LOCAL_PREBUILT_STATIC_JAVA_LIBRARIES :=securit ...