文档流
先说说什么是公文流转 什么流 它是一系列连续的东西
<div style="background-color:pink;40px;height:80px;">第一个框 </div> <div style="background-color:red;40px;height:80px;">第二个框 </div> <div style="background-color:yellow;40px;height:80px;">第三个框 </div> <span>我换行</span> <span>我不换行</span>
我们写在html里面的元素 系统会放在数据流里依次读取 依照从左到右从上到下的顺序 放置在页面上
当然在放置的过程中 牵扯到行内元素与块级元素的概念
简单说明一下
块级元素: 如div 每个div元素占领一行 假设没有设置宽度 就默认放满整行 假设指定了宽度 即使宽度再小 后面的元素也得另起一行放置
行内元素:如span不会换行 举个样例如A是行内元素 后面的元素就放在A的右边而不是下边
浮动
先看代码
<div style="background-color:pink;40px;height:80px;float:left;"></div> <div style="background-color:red;80px;height:80px;"></div> <div style="background-color:yellow;40px;height:80px;"> </div> <span>我换行</span> <span>我不换行</span>
大家看第一行的代码里 多了一个float:left
它的意思就是说让这个元素脱离文档流的限制 把他"浮动"到包裹他的容器的最左边 (此时在文档流里就没有它的存在了)
如今在看 那三个div的宽度參数 深红色的宽度是80 我们仅仅看到了右边的40 左边的40个像素被在文档流之外的粉红色div挡住了
这个图的代码例如以下
<div style="float:left;background-color:pink"> <span>dd</span> <select name="general.language"> <option value="volo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </div> <div style="background-color:blue">LLL </div> <div style="background-color:green"> asdf</div> <div style="background-color:yellow;" > ddddd</div> <div> eeee </div>
假设大家用的是chrome的浏览器打开审查元素会看到
事实上蓝色的111div是从顶行放置的 粉红色的div放在它上面 挡住了一部分
(lll asdf 居中打印了 同一段代码在editplus与chrome显示不一样 应该是解释的机制不同吧)
这也符合上面我们说的文档流的理论: 哪个元素有了float属性 就把他取出文档流 而文档流内部的元素就放置在自己应该在的位置上
可问题是我想让asdf也顶行写不行吗?
这就牵扯到float的具体布局方式了 告诉大家一句话
假如某个div元素A是浮动的，假设A元素上一个元素也是浮动的。那么A元素会尾随在上一个元素的后边(假设一行放不下这两个元素，那么A元素会被挤到下一行)；假设A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变。也就是说A的顶部总是和上一个元素的底部对齐。
div的顺序是HTML代码中div的顺序决定的。
靠近页面边缘的一端是前。远离页面边缘的一端是后。
那有还有一个问题了,假设a本身不是浮动的呢?
钻牛角尖了吧,假设a不是浮动的,那它就还在文档流里面呗!就是以下这个图的大红色块说明的道理
假设还是不明确,自己敲几行代码,看看效果就ok
asdf的上一个元素是LLL 所以asdf就放在LLL的正下方 也就是我们图中的效果
那怎么办?
clear
clear : none | left | right | both
取值：
none : 默认值。
同意两边都能够有浮动对象
left : 不同意左边有浮动对象
right : 不同意右边有浮动对象
both : 不同意有浮动对象
clear本身就是清除元素本身的浮动效果的
我们在asdf上加上clear:left就ok了
资料推荐
版权声明：本文博主原创文章。博客，未经同意不得转载。