浮动 | 易学教程

网页中自私自利且影响他人的Float

阅读更多关于网页中自私自利且影响他人的Float

引言：相信大家在用Html+Css编写网页时会经常用到css中float（浮动）这个属性吧，浮动能让我们很好进行页面的布局，但种种问题也随之而来。一.float的基本属性及应用这个属性叫漂浮，顾名思义，就是让设置的标签产生浮动效果，就是脱离原来页面的标准输出流。正常情况下，HTML页面中块元素都是从上倒下排列的。如果想实现左右结构。 float是一种选择（当然还有其他方法）。比如 <div style="widht:500px"> <div style="float:left;">左</div> <div style="float:left;">右</div> </div> 当标签使用了float属性后，就脱离了标准输出流，就不受页面约束了。这样不方便，也不利于页面布局。所以，一般浮动之后要清除浮动。 <div style="widht:500px"> <div style="float:left;">左</div> <div style="float:right;">右</div> <span style="clear:both"></span> </div> 二.浮动的破坏性我们会发现，目前流行采用浮动方法实现的无论是分栏布局，还是列表排列我们都可以用其他一些CSS属性（不考虑table）代替实现，唯一一个实现不了的就是“文字环绕图片”

WEB标准布局（DIV+CSS）学习笔记（二）--DIV的布局基础

阅读更多关于 WEB标准布局（DIV+CSS）学习笔记（二）--DIV的布局基础

DIV的布局是挺基础，也挺重要的知识，有几个关键字：width、height、margin和float，用几个例子进行最简单的说明：每个DIV独占一行的布局先看一个很常见的例子：设计网页时，往往可以将页面分成top、center和bottom三个区域 <!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=gb2312" /> <title>无标题文档</title> <style type="text/css"> #top { background-color: #666666; height: 50px; width: 480px; margin: 5px auto; } #center { background-color: #CCCCCC; height: 200px; width: 480px; margin: 5px auto; } #bottom {

HTML元素的定义顺序对1栏固定1栏浮动布局的影响

阅读更多关于 HTML元素的定义顺序对1栏固定1栏浮动布局的影响

请先看两个布局： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #left { margin-right: 100px; } #right { width: 100px; float: right; } </style> </head> <body> <body> <div id="parent"> <div id="right" style='height: 100px;background-color: #0f0;'>右列定宽</div> <div id="left" style='height: 100px;background-color: #f00;'>左列自适应</div> </div> </body> </body> </html> 效果如下：这是一个普通的一栏固定，一栏浮动的布局。没有什么特别的。下一个布局时这样的： <!DOCTYPE html> <html lang=