html之CSS设计（float定位和position定位详细分析）
5星 · 超过95%的资源 195 浏览量
2021-01-20
13:59:13
上传
评论
收藏 75KB PDF 举报 
html之之CSS设计（设计（float定位和定位和position定位详细分析）定位详细分析）
文章目录文章目录一、float浮动二、position定位
今天来谈谈网页设计中的
float
定位和
position
定位，这两个在网页排版中是必不可少的操作，当然
float
其实用得更多。
一、一、float浮动浮动
1、文档流、文档流
指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。脱离文档流也就是不遵循普通的布局排版，采用自己设定的规则来排
版。能够脱离文档流的两个方法是使用float和position中的absolute。
2、块级元素与内联元素、块级元素与内联元素
前几篇文章中都提到了块级（block）标签和内联（inline）标签，其实这些标签就是所谓的块级元素和内联元素。常见的都有以下几种，
块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
内联元素有span、a、strong、em、label、input、select、textarea、img、br等
块级元素通常被现实为独立的一块，独占一行，多个块级就是占多行；
block元素可以设置width、height属性，但内联元素不行；
内联元素可以多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行。
3、浮动的定义、浮动的定义
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的
浮动框之后的块框表现得就像浮动框不存在一样。
浮动最有效的作用就是能够让原本无法摆放在同一行的块级标签摆放在同一行。
4、、float浮动的使用浮动的使用
.div1{
width:100px;
height: 100px;
background-color: pink;
float:left;
}
.div2{
width:200px;
height: 100px;
background-color: deeppink;
/*float:left;*/
}
.div3{
width:100px;
height: 200px;
background-color: red;
float:left;
}
.div4{
width:200px;
height: 200px;
background-color: darkred;
/*float:left;*/
}
（1）初始状态，即将所有float浮动效果注释掉，原本的效果是这样的：
评论10