1.float属性

box1向右移动，box2顶替了box1的位置，box3顶替了box2的位置。

2.clear属性

案例：

一列三行布局：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        *{

            margin: 0px;

            padding: 0px;

        }

        #contain{

            margin: 0 auto;

            width: 1000px;

            height: 500px;

            /*background-color: red;*/

        }

        #header{

            height: 200px;  /*宽度默认是父级元素的100%，要给高度把盒子撑开*/

            background-color: #6cf;

            margin-bottom: 5px;

        }

        #main{

            height: 500px;

            background-color: green;

            margin-bottom: 5px;

        }

        #footer{

            height: 100px;

            background-color: #6cf;

            margin-bottom: 5px;

        }

    </style>

</head>

<body>

    <div id="contain">

        <div id="header"></div>

        <div id="main"></div>

        <div id="footer"></div>

    </div>

</body>

</html>

左右布局：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        *{

            margin: 0;

            padding: 0;

        }

        #contain{

            margin: 0 auto;

            height: 500px;

            width: 1000px;

        }

        #side{

            float: left;

            width: 300px;

            height: 500px;

            background-color: green;       /*如果不加margin-right，把main的浮动方式改为right，也可以实现左右布局，中间仍然有5px的间隙*/

            margin-right: 5px;

        }

        #main{

            float: left;

            width: 695px;

            height: 500px;

            background-color: blue;

        }

    </style>

</head>

<body>

    <div id="contain">

        <div id="side"></div>

        <div id="main"></div>

    </div>

</body>

</html>

3行2列布局：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        *{

            padding: 0;

            margin: 0;

        }

        #contain{

            margin: 0 auto;

            width: 1000px;

            height: 600px;

        }

        #header{

            height: 200px;

            background-color: blue;

            margin-bottom: 5px;

        }

        #main{

            height: 600px;

            margin-bottom: 5px;

        }

        #side{

            height: 600px;

            width: 200px;

            float: left;

            background-color: red;

        }

        #mains{

            height: 600px;

            width: 795px;

            float: right;

            background-color: green;

        }

        #footer{

            height: 100px;

            background-color: pink;

        }

    </style>

</head>

<body>

    <div id="contain">

        <div id="header"></div>

        <div id="main">

            <div id="side"></div>

            <div id="mains"></div>

        </div>

        <div id="footer"></div>

    </div>

</body>

</html>

前端学习笔记--CSS布局--float定位的更多相关文章

  1. 前端学习笔记--CSS布局--层定位

    1.层定位概述: z-index:前后叠加顺序 2.position属性: 3.fixed: 2.relative: 移动后: static没有往上移动占据box1的位置. 3.absolute: 移 ...

  2. 前端学习笔记--CSS布局--文件流定位

    1.概述 2.文档流定位:从上到下,从左到右 代码: <!DOCTYPE html> <html lang="en"> <head> <m ...

  3. web前端学习笔记(CSS盒子的定位)

    相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准流方式对待它.      使用relat ...

  4. 前端学习笔记--CSS布局--盒子模型

    1.概述: 2.盒子模型 overflow属性: border属性: 1.padding属性: margin:

  5. HTML 学习笔记 CSS样式（定位）

    CSS定位(Positioning)属性 允许你对元素进行定位. CSS定位和浮动 CSS为定位和浮动提供了一些属性,利用这些属性 可以建立列式布局,将布局的一部分与另一部分重叠.还可以完成多年来通常 ...

  6. web前端学习笔记(CSS变化宽度布局)

    一.“1-2-1”单列变宽布局: 对于变宽度的布局,首先要使内容的整体宽度随浏览器窗口宽度的变化而变化.因此中间的container容器中的左右两列的总宽度也会变化,这样就会产生不同的情况.这两列是按 ...

  7. web前端学习笔记(CSS固定宽度布局)

    一.单列布局: 这是最简单的一种布局方式,之所以给出该示例,还是为了保证本篇博客的完整性. <html xmlns="http://www.w3.org/1999/xhtml" ...

  8. 前端学习笔记--css案例

    要实现的案例: 1.分析布局 2.划分文件结构: 3.编写css代码 * { padding: 0; margin: 0; } body { font-size: 16px; color: burly ...

  9. 前端学习(20)~css布局(十三)

    常见的布局属性 (1)display 确定元素的显示类型: block:块级元素. inline:行内元素. inline-block:对外的表现是行内元素(不会独占一行),对内的表现是块级元素(可以 ...

随机推荐

  1. mysql You can't specify target table for update in FROM clause解决方法

    mysql You can't specify target table for update in FROM clause解决方法出现这个错误的原因是不能在同一个sql语句中,先select同一个表 ...

  2. 与TypeScript的一场美丽邂逅

    TypeScript(一)前言:当你点开这篇文章时,我相信你已经在很多地方都已经听说过或者见过TypeScript了.但是可能对TypeScript依然有很多问号:TypeScript到底是什么?为什 ...

  3. [转帖]AMD三代锐龙线程撕裂者命名曝光：24核心3960X

    AMD三代锐龙线程撕裂者命名曝光:24核心3960X https://www.cnbeta.com/articles/tech/900271.htm 一直搞不懂TDP啥意思 可能会高于TDP的功率.. ...

  4. [WinForm] - "更新 DataSet 应用程序集对象失败，Visual Studio 自动重启" 之解决

    背景 在 WinForm 解决方案中,更新 DataSet 应用程序集对象失败,Visual Studio 自动重启. 试一试 1. 更新 .xsd 时打开对应的 .Designer.cs.2. 如果 ...

  5. Jenkins+maven+gitlab自动化部署之前端构建发布(六)

    前端项目构建,需要在jenkins主机部署node服务,网上有说介绍说安装对应的nodejs插件进行前端项目构建,我这里是直接调用系统npm命令,进行前端打包.具体node部署参考:Centos7部署 ...

  6. 自定义注解扩展springMvc的validation注解

    文章目录 前言 自定义校验注解 使用 后记 前言 我们都知道 springMvc 的检验框架使用的是 hibernate 的 validator ,检验数据,是有那么一点小爽快: 但是,validat ...

  7. 八皇后问题——列出所有的解，可推至N皇后

    <数据结构>--邓俊辉版本 读书笔记 今天学习了回溯法,有两道习题,一道N皇后,一道迷宫寻径.今天,先解决N皇后问题.由于笔者 擅长java,所以用java重现了八皇后问题. 注意是jav ...

  8. Hello World详解

    Hello World 题目 [题目描述] 输出“Hello World!”(不输出“”). [输入格式] 啥都没有. [输出格式] Hello World! [数据规模] 输出就行了,管那么多干什么 ...

  9. ~postman使用Runner

    1.准备参数的.text文件. postman支持三种参数的方式,分别为.text文件,.csv文件,json文件.此处使用.text文件.编码格式使用utf-8 2.替换请求参数 3.设置Runne ...

  10. Linux基本命令讲解

    前言 不多BB,直接上图 Linux命令行的组成结构 [root@oldwang ~]# [root@oldwang ~]# [root@oldwang ~]# [root@oldwang ~]# [ ...