CSS clear both清除产生浮动 ，使用了css float浮动会产生css浮动，这个时候就需要清理清除浮动，就用clear样式属性即可实现。
拿到一张设计稿，最先想到的就是如何布局。 垂直布局？水平布局？悬浮？层叠样式？ 今天我们来复习一下CSS原生的布局属性——float。 float 浮动属性。 浮动是指元素悬浮在其他元素的上方，靠左或靠右排列； 浮动元素会避开其他元素的可视内容区域； 浮动元素可以是任何元素类型，可以设置margin来控制浮动元素与其他元素内容之间的距离； 被设置了float的元素无法使用left、top、right、bottom等位置属性（不生效）。 float:left; 元素向左浮动。 当前元素向左向上浮动，非浮动元素
相对定位就是移动一个标签，根据什么来移动呢？对了，就是根据它原来的位置移动，就这么简单。比如，我现在要移动这块场地，就这样做：
$(this).scroll(function() { // 页面发生scroll事件时触发
感觉是刚过春招，又要开始秋招，对于技术渣渣、学历普通的我，忧愁再次降临。开始准备秋招路途中……来温故而知新，沉下心好好学习。貌似本人在清除浮动中第一次接触clear:left/right，平时只用到clear:both，好像也只见到这个，这就尴尬。
我们知道有时使用了css float浮动会产生css浮动，这个时候就需要清理清除浮动，我们就用clear样式属性即可实现。
很早以前就接触过CSS，但对于浮动始终非常迷惑，可能是自身理解能力差，也可能是没能遇到一篇通俗的教程。
展示效果 : 图片是 行内块元素 , 与文字地位相同 , 无法实现文字环绕图片效果 ;
1.多个元素并列使最后一个元素永远靠右 设置该元素margin-left:auto即可
protel99se快捷键 enter——选取或启动 esc——放弃或取消 f1——启动在线帮助窗口 tab——启动浮动图件的属性窗口 pgup——放大窗口显示比例 pgdn——缩小窗口显示比例 end——刷新屏幕 del——删除点取的元件（1个） ctrl+del——删除选取的元件（2个或2个以上） x+a——取消所有被选取图件的选取状态 x——将浮动图件左右翻转 y——将浮动图件上下翻转 space——将浮动图件旋转90度 crtl+ins——将选取图件复制到编辑区里 shift+ins——将剪贴板里的图件贴到编辑区里 shift+del——将选取图件剪切放入剪贴板里 alt+backspace——恢复前一次的操作 ctrl+backspace——取消前一次的恢复 crtl+g——跳转到指定的位置 crtl+f——寻找指定的文字 alt+f4——关闭prote spacebar——绘制导线，直线或总线时，改变走线模式 v+d——缩放视图，以显示整张电路图 v+f——缩放视图，以显示所有电路部件 home——以光标位置为中心，刷新屏幕 esc——终止当前正在进行的操作，返回待命状态 backspace——放置导线或多边形时，删除最末一个顶点 delete——放置导线或多边形时，删除最末一个顶点 ctrl+tab——在打开的各个设计文件文档之间切换 alt+tab——在打开的各个应用程序之间切换 a——弹出edit\align子菜单 b——弹出view\toolbars子菜单 e——弹出edit菜单 f——弹出file菜单 h——弹出help菜单 j——弹出edit\jump菜单 l——弹出edit\set location makers子菜单 m——弹出edit\move子菜单 o——弹出options菜单 p——弹出place菜单 r——弹出reports菜单 s——弹出edit\select子菜单 t——弹出tools菜单 v——弹出view菜单 w——弹出window菜单 x——弹出edit\deselect菜单 z——弹出zoom菜单 左箭头——光标左移1个电气栅格 shift+左箭头——光标左移10个电气栅格 右箭头——光标右移1个电气栅格 shift+右箭头——光标右移10个电气栅格 上箭头——光标上移1个电气栅格 shift+上箭头——光标上移10个电气栅格 下箭头——光标下移1个电气栅格 shift+下箭头——光标下移10个电气栅格 ctrl+1——以零件原来的尺寸的大小显示图纸 ctrl+2——以零件原来的尺寸的200%显示图纸 ctrl+4——以零件原来的尺寸的400%显示图纸 ctrl+5——以零件原来的尺寸的50%显示图纸 ctrl+f——查找指定字符 ctrl+g——查找替换字符 ctrl+b——将选定对象以下边缘为基准，底部对齐 ctrl+t——将选定对象以上边缘为基准，顶部对齐 ctrl+l——将选定对象以左边缘为基准，靠左对齐 ctrl+r——将选定对象以右边缘为基准，靠右对齐 ctrl+h——将选定对象以左右边缘的中心线为基准，水平居中排列 ctrl+v——将选定对象以上下边缘的中心线为基准，垂直居中排列 ctrl+shift+h——将选定对象在左右边缘之间，水平均布 ctrl+shift+v——将选定对象在上下边缘之间，垂直均布 f3——查找下一个匹配字符 shift+f4——将打开的所有文档窗口平铺显示 shift+f5——将打开的所有文档窗口层叠显示 shift+单左鼠——选定单个对象 crtl+单左鼠，再释放crtl——拖动单个对象 shift+ctrl+左鼠——移动单个对象 按ctrl后移动或拖动——移动对象时，不受电器格点限制 按alt后移动或拖动——移动对象时，保持垂直方向 按shift+alt后移动或拖动——移动对象时，保持水平方向 * 顶层与底层之间层的切换 + （-） 逐层切换：“+”与“-”的方向相反 Q mm（毫米）与mil（密尔）的单位切换 IM 测量两点间的距离 ◎edafans 版权所有，拒绝转载◎exdjavKNu5 E x 编辑X ，X为编辑目标，代号如下：(A)=圆弧；(C)=元件；(F)=填充；(P)=焊盘；(N)=网络；(S)=字符；(T)=导线；(V)=过孔；(I)=连接线；(G)=填充多边形。例如要编辑元件时按E C，鼠标指针出现“十”字，单击要编辑的元件即可进行编辑。 P x 放置 X，X为放置目标，代号同上。 M x 移动X，X为移动目标，(A)、(C)、(F)、(P)、(S)、(T)、(V)、(G)同上，另外( I )=翻转选择部份；(O)旋转选择部份；(M)=移动选择
代码来自网络~ /*任意位置浮动固定层*/ /*调用： 1 无参数调用：默认浮动在右下角 $("#id").floatdiv(); 2 内置固定位置浮动 //右下角 $("#id").floatdiv("rightbottom"); //左下角 $("#id").floatdiv("leftbottom"); //右下角 $("#id").floatdiv("rightbottom"); //左上角 $("#id").floatdiv("lefttop"); //右上角 $("#id").floatdiv
浮动特性 ( 脱离标准流布局 ) : 浮动的元素 会 脱离 标准流布局 , 剩余的标准流布局正常显示 , 脱离的浮动元素在标准流上方显示 ;
布局的三种基本方式： 标准流 按照标签默认的特性摆放盒子即为标准流 浮动流 利用浮动摆放盒子即为浮动流 定位流 利用定位摆放盒子即为定位流 浮动最开始是做图文绕排的。
圣杯布局是经典的css布局，左右两栏的宽度固定不变，中间那一栏是自适应，下面将用felx、float、position三种方法进行圣杯布局
现在的网页设计中，浮动导航菜单被广泛应用了，通过它，可以可以快速移动到菜单，Smint 就是这样一个简单的 jQuery 插件，可以将导航菜单浮动在页面的顶部，点击菜单快速滚动到达页面的位置，并且能够设置滚动的速度。
首先要知道，div是块级元素，在页面中独占一行，自上而下排列，也就是传说中的流。如下图：
{dotted startColor="#ff6c6c" endColor="#1989fa"/}
常见的块元素有：ul列表、form表单、h1-h6标题、hr水平线、p段落、div
· 3.优化CSS（压缩合并css，如margin-top,margin-left…)
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>jquery弹出层浮动层代码</title> <script src=”/ajaxjs/jquery1.3.2.js” type=”text/javascript”></script> <style> *{ margin:0; padding:0} body{ margin:0; padding:0; font-size:12px} ul,li{ list-style:none} ul{position:relative;top:-3px; left:-3px;border:1px solid #ccc; background:#fff;} li{height:23px;line-height:23px;cursor:default; padding:0 0 0 10px} li.current{background:#eee} .wrap{ width:158px; background:#eee; position:absolute;} </style> <script type=”text/javascript”> $(function(){ $(“.wrap”).hide(); var objW=$(“.wrap”).width(); var objH=$(“.wrap”).height(); $(document).mousedown(function(e){ var selfX=objW+e.pageX; var selfY=objH+e.pageY var bodyW=document.documentElement.clientWidth+document.documentElement.scrollLeft; var bodyH=document.documentElement.clientHeight+document.documentElement.scrollTop; if(selfX>bodyW && selfY>bodyH){ $(“.wrap”).css({top:(bodyH-objH),left:(bodyW-objW)}).show(); }else if(selfY>bodyH){ $(“.wrap”).css({top:(bodyH-objH),left:e.pageX}).show(); }else if(selfX>bodyW){ $(“.wrap”).css({top:e.pageY,left:(bodyW-objW)}).show(); }else{ $(“.wrap”).css({top:e.pageY,left:e.pageX}).show(); } }) $(“li”).hover(function(){ $(this).addClass(“current”); },function(){ $(this).removeClass(“current”); }).click(function(){ alert($(this).text()) $(this).parent().parent().hide(); }) }) </script> </head> <body> 请按F5刷新，才干看到效果。点击鼠标左键，弹出层，在最右边点击时03
轻量级框架jQuery Mobile 所需文件 <link rel="stylesheet" href="jquery.mobile-1.1.2/jquery.mobile-1.1.2.css"/> <script type="text/javascript" src="jquery.mobile-1.1.2/jquery-1.6.4.js"></script> jquery 应放在 mobile 上面。 <script typ
多列布局在一个网页设计中非常常见，不仅可以用来做外部容器的布局，在一些局部也经常出现多列布局，比如下面圈出来的都是多列布局：
CSS是Cascading Style Sheets的加简称，中文称为层叠样式表，用来控制网页数据的表现，可以使网页的表现与数据内容分离。
最近 GitHub 热榜上持续有一个这样的 Python 项目，自称「100天从新手到大师」。目前 Star 数量已有 19000 多。
encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。
position的值， relative和absolute分别是相对于谁进行定位的？
本文介绍了CSS的基础知识，包括CSS盒模型、选择器、常用属性以及深入解析了CSS的布局、响应式设计等。通过本文的学习，读者可以掌握CSS的语法和基本使用方法，能够编写出符合Web标准的网页。
最近在弄毕业设计，总有个现象，就是一个段落，自己吐墨水的话，吐不超过两句就吐完了。回头看看博客，发现这一年来，才3篇文章，原来是这样才缺乏墨水啊。
作者：@markyun markyun.github.io/2015/Front-end-Developer-Questions/ HTML Doctype作用？严格模式与混杂模式如何区分？它们有何意
流动布局有3种布局模型，分别是流动布局（常规默认时）、定位布局（relative）以及浮动布局，其中所述的流动布局、定位布局已在第一点讲解，接下来咱们查看浮动布局。
HTML Doctype作用？严格模式与混杂模式如何区分？它们有何意义? HTML5 为什么只需要写 ？ 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？ 页面导入样式时，使用link和@
.chatRow 中的 align-items: flex-end; 让其子元素在底部对齐，实现头像垂直方向靠下对齐
块标签 每一个块属性标签都是从新的一行开始，而且之后的元素也都会从新的一行开始 可以设置宽度、高度，行高，距顶部距离，距底部距离 块属性标签的宽度假如不做设置，会直接默认为父元素宽度的100% 块属性标签是可以直接嵌套的 p标签中不能嵌套div标签
HTML5学堂：如何优化前端页面 / 如何优化网页。作为前端开发人员来说，不但要开发出能兼容各大主流浏览器的页面，而且还需要懂得去优化前端页面。本文主要给大家讲解如何去优化页面。 1 前期准备 1.1 首页命名为index.html / index.htm / index.php等。 1.2 需要制作404页面。 1.3 文件夹结构合理。 1.4 命名使用英文且有语义性的单词，并提供参考文档。 2 结构 2.1 文件头部分 2.1.1 需要提供文档声明 2.1.2 设置utf-8的编码格式，并放置于titl
（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！） （注2：更多内容请查看我的目录。）
该段落使用了样式 "text-muted"。
终于做完了网页(很简略!!!),但是也花了我不少时间,这篇文章决定详细的讲解,顺便也当做是复习巩固了,因为自己做的时候真的踩了很多坑...
Bootstrap学习有两个重点，一个是概念的理解，理解bootstrap是如何通过div来代替过去的table布局的；一个是常用结构的熟悉，做到需要的组件及时能找到，组合一下就可以满足需求。学习后的
圣杯布局和双飞翼布局一直是前端面试的高频考点，圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章 《In Search of the Holy Grail》。 比起双飞翼布局，它的起源不是源于对页面的形象表达。在西方，圣杯是表达“渴求之物”的意思。而双飞翼布局则是源于淘宝的UED，可以说是灵感来自于页面渲染。
前两天下午四点打过来的电话，没接到。因为是座机分机所以不能打过去（试了几次，这个事情告诉我们手机要随身携带，万一面试官用座机打的，你还不能回拨）。于是我等啊等，终于在快七点面试官给我打过来了。阿里面试的用户体验是真的好，面试官很耐心。再次感谢阿里hr都很好，昨天查了状态已回绝。自己实力不够，还需继续修炼 先说说总体情况面了三十多分钟，我问问题用了十几分钟，总共四十多分钟。基本的问题回答出来了，但是本人比较内向，不是很会接话茬子有点尬聊。每次回答完一个问题，就安静了几秒钟。基本问题都回答出来了，然后再一点点
学习牛腩时，也刚刚结束个人重构，所曾经面差点儿相同1/3的部分感觉都非常熟悉，非常上手，包含数据库设计和B、D层代码的编写。当中重新理解了SQLHelper的完美演化、存储过程的强大。使用了触发器初探（触发器建好以后看不到，但能够查询出来，后来发现原来在每张表的以下），接着就是站点的建立，事实上和三层差点儿相同，web层相当于我们的UI层，仅仅只是之前我们的控件放在窗口中。如今放在网页中，然后引用CSS样式来控制html中各控件属性，真正做到网页表现与内容分离的一种样式设计语言 。
前言 定位系统中第一难理解就是Normal flow，而第二就非Float莫属了，而Float难理解的原因有俩，1. 一开头我们就用错了；2. 它跟Normal flow靠得太近了。本文尝试理清Fl
学习原生js的人一定会接触到client家族、scroll家族和offset家族。其中clienHeight、scrollHeight和offsetHeight一般用来求网页内容的高度，而对应的clientWidth、scrollWidth和offsetWidth则用来求网页内容的宽度，由于width和Height属性是类似的，所以这里我只挑这三个height来讲一下。
以前我接受了网上不少博文的说法，一直认为学习css的三大最重要问题是：盒模型、定位、浮动。因为这三块的内容决定了css布局的能力。但是通过上一篇日志的分析，xhtml要实现和css的解耦，就要尽量不依赖于css（或者说不要纯粹为了给css预留接口而添加不必要的class和id），那么，在用css布局之前，其实就有一个更紧迫的任务摆在我们的面前——如何将css规则准确应用到目标元素。于是，css选择符的地位在这个前提下就空前的提高了。所以，在开始学习盒模型、浮动、定位之前，有必要回顾一下选择符。 一般稍微接触
使用动画的过程中，如果在同一个元素上调用一个以上的动画方法，那么对这个元素来说，除了当前正在调用的动画，其他的动画将被放到效果队列中，这样就形成了动画队列。
在上一篇博文《移动端各种各样的列表的制作方法(一)》中,我们通过两个简单的DEMO,演示了一下在移动端H5中的列表制作.不过,这两个演示还是太简单了.可能大家觉得不过如此嘛.这一章,我们将制作稍微复杂一点点的列表.
在线演示地址：https://haiyong.site/demo/duanwu
本教程是，原文章发布系统教程的精编重制版，会包含每一节的源码，以及修正之前的一些错误。因为之前的教程只做到了评论模块，很多地方还不完美，因此重制版会修复之前的一些谬误和阐述不清的地方，而且，后期我会考虑完成该项目的后台管理。希望本教程提供的内容，可以成为JavaWeb初学者一套较为完整的练手项目。
缓存：ETag Expire Last-Modified 三者合用，Expire 可以让浏览器完全不发起 Http 请求，若 F5 发起请求，也可以通过判断 ETag（对应浏览器字段 If-None-Match） 和 Last-Modified （对应浏览器字段 If-Modified-Since）字段是否需要更新资源还是使用 304(Not Modified) 的本地资源；
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
