无浮动

<ul style="width: 440px;">

    <li id="myli" style="border: 4px solid #ff6633; background: #ffffc0;list-style:none;">

        <img src="http://pic.cnblogs.com/avatar/827631/20151118113854.png"/>

    </li>

</ul>

其中图片高度180px，此时li的高度alert为183。↑↑↑↑↑

接下来，在li中加上float属性：↓↓↓↓↓

<ul style="width: 440px;">

    <li id="myli" style="border: 4px solid #ff6633; background: #ffffc0;list-style:none;float:left">

        <img src="http://pic.cnblogs.com/avatar/827631/20151118113854.png"/>

    </li>

</ul>

此时li的高度alert为。↑↑↑↑↑

接下来，在img中加上float属性：↓↓↓↓↓

<ul style="width: 440px;">

    <li id="myli" style="border: 4px solid #ff6633; background: #ffffc0;list-style:none;">

        <img src="http://pic.cnblogs.com/avatar/827631/20151118113854.png" style="float:left"/>

    </li>

</ul>

此时li的高度alert为0。↑↑↑↑↑

------------------------dispaly:inline-block与float:left--------------------------------

<ul style="width: 440px;">

    <li style="border: 4px solid #ff6633; background: #ffffc0;list-style:none;display:inline-block">

        <img src="http://pic.cnblogs.com/avatar/827631/20151118113854.png"/>

    </li>

    <li style="border: 4px solid #ff6633; background: #ffffc0;list-style:none;">

        <img src="http://pic.cnblogs.com/avatar/827631/20151118113854.png"/>

    </li>

</ul>
<ul style="width: 440px;">

    <li style="border: 4px solid #ff6633; background: #ffffc0;list-style:none;float:left">

        <img src="http://pic.cnblogs.com/avatar/827631/20151118113854.png"/>

    </li>

    <li style="border: 4px solid #ff6633; background: #ffffc0;list-style:none;">

        <img src="http://pic.cnblogs.com/avatar/827631/20151118113854.png"/>

    </li>

</ul>

浮动破坏了inline box，也就是破坏了高度，所以这里含有浮动属性的li元素实际上是没有高度的。所以呢，要是后面还有同样的li标签的话，就会水平对齐排列的

-------------------清除浮动的方法----------------------------

IE下清除浮动准则很简单，使元素haslayout就可以了。如宽度值，高度值，绝对定位，zoom，浮动本身都可以让元素haslayout。显然，首选zoom:1;不会干扰任何样式。

非IE浏览器常用的是overflow属性，overflow:hidden;或是overflow:scroll都可以，由于后者经常一不小心出现滚动条，所以前者用的更多些。

由于现代浏览器都支持after伪类伪元素，所以常常也会用after写入一个clear属性的元素清除浮动。当然，最投机取巧的方法就是直接一个<div style="clear:both;"></div>放到当作最后一个子标签放到父标签那儿。

1. 投机取巧法

直接一个<div style="clear:both;"></div>放到当作最后一个子标签放到父标签那儿，此方法屡试不爽，兼容性强，使用方便，是初学时使用的上佳之选。
但是是个巨大的浪费，浪费了一个标签，而且只能使用一次，所以这个方法不推荐。而且有时候一不留神中间多了个空格会产生一段空白高度的。
eg:
<div style="width:440px; border:4px solid; border-color: blue red green yellow;">

    <div style="border:4px solid #ff6633; background:#ffffc0; float:left;"><img src="http://pic.cnblogs.com/avatar/827631/20151118113854.png" /></div>

    <div style="border:4px solid #ff6633; background:#ffffc0; float:left;"><img src="http://pic.cnblogs.com/avatar/827631/20151118113854.png" /></div>

    <div style="clear:both;"></div>

</div>
未加之前，整个div的高度为0
加了之后<div style="clear:both;"></div>，高度为188
 

2. overflow + zoom方法

.fix{overflow:hidden; zoom:1;}

此方法优点在于代码简洁，涵盖所有浏览器，可谓不错的选择啊。

不过也是有问题的，就是这个overflow:hidden;是个小炸蛋，要是里面的元素要是想来个margin负值定位或是负的绝对定位，岂不是直接被裁掉了，所以此方法是有不小的局限性的。一般不用这个方法，只是有时候顺便去除浮动时用用。

3. after + zoom方法

先来简单讲讲after，所谓after，就是指标签的最后一个子元素的后面。于是呢，我们可以用CSS代码生成一个具有clear属性的元素，其中的关键样式就是content了。或许您从网上看到的content里面的内容是”.”一个点，貌似随便写什么东西都没有问题，比如content:'clear both';没问题，或是content:'张鑫旭'也是ok的。于是有：
.fix{zoom:1;}
.fix:after{display:block; content:'clear'; clear:both; line-height:0; visibility:hidden;}

这里的line-height:0写成height:0也是可以的。此方法可以说是综合起来最好的方法了，不会影响任何其他样式，通用性强，覆盖面广。

------------------------------------

JavaScript可以改变CSS的属性。float貌似是JavaScript中的一个关键字，不能使用obj.style.float="left";这样的句子。得使用其他写法。

IE浏览器：

obj.style.styleFloat = "left";

其他浏览器：

obj.style.cssFloat = "left";

来源：http://www.zhangxinxu.com/wordpress/?p=594

--------------------------除了float外的让两个div并排的方法------------------------------------------------

 <html xmlns="http://www.w3.org/1999/xhtml"><head>

 <style type="text/css">

 .box{background: #09c;padding: 50px;width:39%;border:1px solid #f5f5f5;height: 300px;}

 .mgr20{margin-right:20px}

 </style>

 </head>

 <body>

 <div style="padding:20px 0">

     <div class="box mgr20" style="position:absolute">aaaaaaaaaa</div>

     <div class="box" style="margin-left:49%"></div>

 </div>

 <div style="background:red;height:50px;">sssssssssss</div>

 </body></html>

用float会让高度塌陷，而position:absolute同样，那么第九行的padding-bottom：20px会不起作用，(见下下个例子)，所以本例中需要设定一个高度值（或是足以撑开高度的值）

这样用http://www.zhangxinxu.com/wordpress/?p=1152

其中的例子http://www.zhangxinxu.com/study/201010/mini-blog-no-width.html实验过后更有感触

里面提到的三无准则，不明觉厉！

--------------------------微博例子-------------------------------------------------

 <html>

 <head>

 <style type="text/css">

 body{color:#333;background:#ddf3f7;}

 .body_class{width:800px;margin:0 auto;clear:both;}

 p{padding:0;margin:0;}

 #blog{background:#fff;width:600px;}

 #myBlog{padding:10px 25px 30px 20px;}

 #bolg_head{position:absolute;}

 #head_img{border:1px solid #ccc}

 #bolg_content{padding:0 0 25px 76px;border-bottom:1px dotted #222;}

 #bolg_content p{font-size:14px;line-height:22px;padding-bottom:6px;}

 </style>

 </head>

 <body class="body_class">

 <div id="blog">

 <div id="myBlog">

     <div id="bolg_head"><img src="a.jpg" id="head_img" /></div>

     <div id="bolg_content">

         <p>徐若瑄VIVIAN<img src="http://timg.sjs.sinajs.cn/t3/style/images/common/transparent.gif"/>：一個人的晚餐！茶泡飯！飯、飯、飯… 今日不減肥，先把病治好再說！ 我認真吃完這，燒就會退了吧？！ 開動啦~~~~~~~~~~~~~~~~~~</p>

         <div><img src="b.jpg"/></div>

     </div>

 </div>

 </div>

 </body>

 </html>

这是上述的图a图b

两个方法实现博客容器宽度变大时布局不乱：一个是第9行的position:absolute;一个第9行的改为float:left;

------------------------------------------------------------------

<html>

<head>

<style type="text/css">

.div { padding:20px; margin:10px 0 0 10px; background-color:#f0f3f9; float:left; }

.abs { position:absolute; }

</style>

</head>

<body class="body_class">

<div class="div">

    <img src="http://pic.cnblogs.com/avatar/827631/20151118113854.png" />

    <p>图片无absolute</p>

</div>

<div class="div">

    <img class="abs" src="http://pic.cnblogs.com/avatar/827631/20151118113854.png" />

    <p>图片absolute后</p>

</div>

</body>

</html>

完了完了，这个absolute的例子又让我感觉。。凌乱了，可能是因为它把属性加在了img上？

先把效果放上来，

-----------------------CSS 浮动的16条规则-------------------------------------------------

1.浮动元素会从文档正常流中删除，但它仍会影响布局
2.浮动非替换元素必须为其指定width，否则元素的width会趋于0而导致浮动元素不能完整显示
3.一旦元素具有了浮动属性，它便成为了一个块级元素。
4.浮动元素的左右外边界不能超出包含块的左右内边界
5.浮动元素永不会重叠

6.浮动元素不会超过容器的上padding
7.后浮动的元素永不会超过先浮动元素的顶端
8.浮动元素会尽可能高地放置，便这个高受限于规则6和规则7
9.浮动元素的下边界没有要求，因此当容器不足以容下浮动元素时，浮动元素会向下延伸。但部分浏览器会采取增大容器高度以容下浮动元素

，而对于符合CSS2.1规范的浏览器要想让容器容下浮动元素的一个可行方法是：让容器也浮动
10.浮动元素向下延伸时，不会影响正常文本的显示，文本会相对于浮动元素进行偏移。但部分文本背景会被浮动元素遮住

11.如果浮动元素设置了负的外边距、这将破坏规则4、6、7
12.当浮动元素的width>容器的width时，这会使得浮动元素超出容器的左右边界(超左超右依浮动方向而定) 
13.浮动重叠规则：行内框(如strong)与浮动元素重叠时，其边框、背景、内容均位于浮动元素之上；块框与浮动元素重叠时，其边框、背景在

浮动元素之下，而内容在浮动元素之上。
14.对某个元素应用clear:left，意味着这个元素的左边不能有浮动元素。
15.clear不能用于非块级元素，比如<br/>，在大多数浏览器看来它是一个非块级元素，因此如果对br应用clear来清除浮动不会有任何效果，

除非改变br的display:block。
16.如果某元素应用clear清除浮动，则此元素设置的上外边距值会被忽略，但会有一个重新计算的上外边距值(甚至可能为0).如果希望此元素

与浮动元素之间有一个明确的间隔，可以在浮动元素上设置下外边距。

------------------------CSS 浮动的16条规则-end-------------------------------------------------
float元素的父元素不能指定clear属性(Mac IE)
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。用em作单位。宽度之和<99%
float元素不能指定margin、padding》解决1：使用hack方法为IE指定特别的值；解决2：可以在float元素内部嵌套一个div来设置margin和padding
 
 
好久没写了，最近懒虫侵体没救了
做项目的时候碰到了，li中间会有空格的问题，发现我张大神已经提过这个啦，但是懒癌发作期就先甩链接了

CSS基础知识真难啊-浮动的更多相关文章

  1. CSS基础知识真难啊

    CSS层叠样式表Cascading Style Sheets CSS派生选择器(上下文选择器): 后代选择器:h1  strong {color:red;}第一个参数和第二个参数之间的代数是可以无限的 ...

  2. CSS基础知识真难啊-font

    不吐不快啊!!!! 上午测试还好好的,下午再写一次准备发出来就出错了!! 传说中程序媛三大错觉:我肯定没错,刚才还好好的,一定是有人改了我代码.. 我的口头禅都快变成“刚刚还好好的”了! 事情是这样的 ...

  3. CSS基础知识真难啊-background-渐变

    文章参考 http://www.zhangxinxu.com/wordpress/?p=727 http://www.uqu8.com/html/2014/html-css_1105/176.html ...

  4. CSS基础知识真难啊-position-relative-absolute

    http://blog.csdn.net/libertea/article/details/11662661 -----------position:relative:生成相对定位的元素,相对于其正常 ...

  5. CSS基础知识（定位、浮动）

    12.浮动 特点:将当前元素脱离文档流    float: left 即左浮动  float: right 即右浮动 注:*父与子元素,设置子元素浮动不能超出父元素的范围 *多个元素均设置为浮动时,将 ...

  6. CSS基础知识之position

    最近在慕课网学习了 网页布局基础 和 固定层效果 ,都是由声音甜美的 婧享人生 老师所录制,视频详细讲解了CSS中position的用法,在此把学习笔记分享给大家. CSS定位机制 标准文档流(Nor ...

  7. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  8. 〖前端开发〗HTML/CSS基础知识学习笔记

    经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...

  9. CSS基础知识之float

    前段时间写过一篇CSS基础知识之position,当时对float的理解不太准确,被慕课网多名读者指出(原文已修正,如有误导实在抱歉).现对float进行更深入的学习,在此把学习心得分享给大家. 浮动 ...

随机推荐

  1. WPF制作的小型笔记本-仿有道云笔记

    楼主所在的公司不允许下载外部资源, 不允许私自安装应用程序, 平时记录东西都是用记事本,时间久了很难找到以前记的东西. 平时在家都用有道笔记, 因此就模仿着做了一个, 先看下实际运行图片: 1. 初始 ...

  2. 通向高可扩展性之路（WhatsApp篇）---- 脸书花了190亿买来的WhatsApp的架构

    原文链接:http://highscalability.com/blog/2014/2/26/the-whatsapp-architecture-facebook-bought-for-19-bill ...

  3. bootstrap点滴

    1.nav-stacked 这个属性可以决定 tab的变为竖的,不添加的话为横向的. 2.tab  横向的 ul中必须含有nav nav-tabs ul li a 中必须有data-toggle=&q ...

  4. class文件概述

    将java代码编译后会产生class文件,并且一个clas文件会对应唯一一个java类或者接口.下面对一个通过一个简单的例子来简述一下class文件的结构. java代码 public class J ...

  5. C# 对sharepoint 列表的一些基本操作,包括添加/删除/查询/上传文件给sharepoint list添加数据

    转载:http://www.cnblogs.com/kivenhou/archive/2013/02/22/2921954.html 操作List前请设置SPWeb的allowUnsafeUpdate ...

  6. 本机ubuntu链接阿里云服务器（也是ubuntu）

    首先在本机安装ssh工具,并修改配置文件(参考:http://www.cnblogs.com/herd/p/5009067.html) 第一步:ssh 100.121.156.32(即:服务器的ip地 ...

  7. 【web端】百度地图api

    百度地图js加载 页面引入: 修改申请的密钥:<script type="text/javascript" src="http://api.map.baidu.co ...

  8. MyBatis_Generator的使用（实践）

    使用MyBatis的Generator主要配置三个地方 1.pom.xml 2.generatorConfig.xml 3.maven命令生成文件 一.pom.xml 1.引入依赖 <mysql ...

  9. 关于 HTTP 请求头的内容

    HTTP(HyperTextTransferProtocol)即超文本传输协议,目前网页传输的的通用协议.HTTP协议采用了请求/响应模型,浏览器或其他客户端发出请求,服务器给与响应.就整个网络资源传 ...

  10. 【BZOJ 2809】【APIO 2012】dispatching

    昨天晚上zyf神犇问我的题,虽然我太弱参加不了APIO但也做一做吧. 用小数据拍了无数次总是查不出错来,交上去就WA,后来用国内数据测发现是主席树上区间相减的值没有用long long存,小数据真是没 ...