一.普通流(normal flow)
又称为文档流,标准流,普通流。
html,相当重要的概念,在网页中,标签从上至下,从左至右,。比方块级元素,行内元素的默认排序我们称之为普通流。这种布局方式称之为普通流布局
css的三种定位机制: 文档流,浮动,定位
二.浮动(float)
浮动最早是用来控制图片,以便达到其他元素(特别是文字)实现“环绕”图片的效果。
后来,发现浮动可以让任何盒子同一行显示,渐渐偏离主题,只有就一直用浮动进行布局
什么是浮动?
元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制,移动到其父元素中指定位置的过程。
在CSS中,通过float属性来定义浮动,其基本语法格式如下:
选择器{float:属性值;}
left 元素向左浮动 / right 元素向右浮动 / none 元素不浮动(默认值)
浮动详细内幕特性
浮动脱离标准流,不占位置,会影响标准流。浮动只有左右浮动。
1.标准流父元素
2.浮动不会压住padding
3.当加了浮动之后,具有行内块的特征
4.浮动的元素总是找到最近的父级元素对齐,不会超出内边距
5.上一个元素是浮动,则顶部对齐,是标准流,则底部对齐
6.改为浮动后塌陷问题消失
总结
浮动 :目的让多个块级元素同一行上显示
float 浮漏特
浮:加了浮动的元素会浮起来,漂浮在其他标准流的盒子上面
漏:加了浮动的元素,他原来的位置漏给了标准流的盒子
特:特别需要注意的是,标准流父元素一起使用,其次,特别需要注意的是,浮动元素变成行内块元素
浮动(float)
最新推荐文章于 2021-11-21 15:20:22 发布