float元素原本的作用是用来使文字包裹图片，现在人们更多的是用来进行布局(ps:有没有点滥用的意思)

也就是说本来你排好的界面设计，但是因为浮动会导致元素脱离文档流，使得其他非浮动的块级元素会无视这个浮动元素所占据的空间，或者是内联元素的变化，导致排版出现问题。

常见的float带来的问题：

这就是问题的所在，那么如何对这些问题进行解决的同时有不会使float失去效果呢？

　　参考资料：

http://www.iyunlu.com/view/css-xhtml/55.html

http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html

https://segmentfault.com/a/1190000004862172

前端HTML中float学习笔记的更多相关文章

  1. 转:openwrt中luci学习笔记

    原文地址:openwrt中luci学习笔记 最近在学习OpenWrt,需要在OpenWrt的WEB界面增加内容,本文将讲述修改OpenWrt的过程和其中遇到的问题. 一.WEB界面开发         ...

  2. VS2013中Python学习笔记[Django Web的第一个网页]

    前言 前面我简单介绍了Python的Hello World.看到有人问我搞搞Python的Web,一时兴起,就来试试看. 第一篇 VS2013中Python学习笔记[环境搭建] 简单介绍Python环 ...

  3. 《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记

    <疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记 二〇一九年二月十三日星期三2时28分54秒 前提:本书适合有初步HTML.CSS.JavaScri ...

  4. 前端html与css学习笔记总结篇(超详细)

    第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才 结合最新的 ...

  5. VS2013中Python学习笔记[环境搭建]

    前言 Python是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言. Python的设计具有很强的可读性,相比其他语言经常使用英文关键字,其他语言的一些标点符号,它具有比其他语言更有特色 ...

  6. spring 中bean学习笔记

    spring 中bean 一.bean的定义和应用 1. bean 形象上类似于getXX()和setXX()的一种. 2. 由于java是面向对象的,类的方法和属性在使用中需要实例化. 3. 规律: ...

  7. web前端开发控件学习笔记之jqgrid+ztree+echarts

    版权声明:本文为博主原创文章,转载请注明出处.   作为web前端初学者,今天要记录的是三个控件的使用心得,分别是表格控件jqgrid,树形控件ztree,图表控件echarts.下边分别进行描述. ...

  8. php中traits学习笔记

    traits学习 越来越多的框架和代码开始使用traits方式去组织一些功能,这是非常高效的代码组织结构. 通过trait来减少不必要的类继承关系,让代码更加复用,形成可以拔插的代码集合. 通过逗号分 ...

  9. VS2013中Python学习笔记[基础入门]

    前言 在上一节中简单的介绍了在VS2013中如何进行开发Hello World,在VS2013中进行搭建了环境http://www.cnblogs.com/aehyok/p/3986168.html. ...

随机推荐

  1. select 如何将文本居中

    开始测试了几种方式但是结果都是失败的,最后测试一种方式终于成功了,所以做下笔记: select{ width: 3.2rem; height: 1.2rem; border-radius: 0.6re ...

  2. 如何反向遍历List集合

    List接口中提供了ListIterator<E> listIterator()这样的一个方法,可以获得一个ListIterator接口的实例,如下: 看一下他的方法: 了解了这些之后再看 ...

  3. 使用redis和简单token机制校验身份的思路

    1. 登录时生成token, 以token为键,以用户信息为值,存储在redis中,设置key过期时间 2. 需要身份验证的接口,带上token 3. 接口校验redis中token是否存在 4. 存 ...

  4. NFA到DFA实例

    下面图使用NFA表示的状态转换图, 使用子集构造法,有如下过程, ε-closure(0) = {0, 1, 2, 3, 4, 6, 7}初始值,令为AA = {0, 1, 2, 3, 4, 6, 7 ...

  5. 【codeforces 765E】Tree Folding

    [题目链接]:http://codeforces.com/problemset/problem/765/E [题意] 给你一棵树; 可以把一个节点的两条相同长度的链合并成一条链; 且这两条相同长度的链 ...

  6. [bzoj3224]普通平衡树[Treap]

    Treap 的各种操作,模板题,要再写几遍 #include <iostream> #include <algorithm> #include <cstdio> # ...

  7. [Poj1743] [后缀数组论文例题] Musical Theme [后缀数组不可重叠最长重复子串]

    利用后缀数组,先对读入整数处理str[i]=str[i+1]-str[i]+90这样可以避免负数,计算Height数组,二分答案,如果某处H<lim则将H数组分开,最终分成若干块,判断每块中是否 ...

  8. hdu_1020_Encoding_201310172120

    Encoding Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total S ...

  9. sublime3设置快捷键在浏览器打开预览

    我下的st3默认不能使用快捷键在浏览器打开,所以要找到源文件然后选择在浏览器打开,非常麻烦.找了很久,终于找到了一个在浏览器打开的快捷方式. 亲测有效. 1.确保你的st3已经安装了package c ...

  10. HTML5：去除IE10中输入框和密码框的X按钮和小眼睛

    在IE10和之后的IE版本中,当在输入框和密码框中输入的时候,后面会自动出现X按钮和小眼睛,如下图所示:  令人苦恼的是,这个效果只有IE才有,其它浏览器是没有这个功能的.为了统一,我们就需要去掉这个 ...