html之CSS设计（float定位和position定位详细分析）

最新推荐文章于 2025-04-17 11:42:57 发布

鸿蒙Next

最新推荐文章于 2025-04-17 11:42:57 发布

阅读量1.2k

点赞数 5

分类专栏：前端开发(js,css,html) 文章标签：定位 html css js 程序人生

本文链接：https://blog.youkuaiyun.com/Viewinfinitely/article/details/105880473

版权

文章目录

- - - 一、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浮动的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .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: