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. 台式电脑Bios界面设置U盘启动

  2. CSS 按钮水波纹特效

    /* 按钮反馈之波纹 */ .ripple { position: relative; /* overflow:hidden */  打开注释及效果不扩散在外 } .ripple:focus{ out ...

  3. confluence6.14.1linux安装破解

    一．简介 Confluence为团队提供一个协作环境.在这里,团队成员齐心协力,各擅其能,协同地编写文档和管理项目.从此打破不同团队.不同部门以及个人之间信息孤岛的僵局,Confluence真正实现了 ...

  4. 漏洞复现之JBoss 4.x JBossMQ JMS 反序列化漏洞（CVE-2017-7504）

    前言: 序列化就是把对象转换成字节流,便于保存在内存.文件.数据库中:反序列化即逆过程,由字节流还原成对象. Java中的ObjectOutputStream类的writeObject()方法可以实现 ...

  5. [bzoj4345][POI2016]Korale_堆_贪心_线段树_dfs

    bzoj4345 POI2016 Korale 题目链接:https://lydsy.com/JudgeOnline/problem.php?id=4345 数据范围:略. 题解: 由于$k$的范围问 ...

  6. RestTemplate对象的使用

  7. 怎么对10亿数据量级的mongoDB作高效的全表扫描

    转自:http://quentinxxz.iteye.com/blog/2149440 一.正常情况下,不应该有这种需求 首先,大家应该有个概念,标题中的这个问题,在大多情况下是一个伪命题,不应该被提 ...

  8. [#] - .Net平台的实时性能监控

    App Metricshttps://www.app-metrics.io ASP.NET Core之跨平台的实时性能监控http://www.cnblogs.com/GuZhenYin/p/7170 ...

  9. Python 用(无脑 and 有脑)方式解决小练习

    题目:企业发放的奖金根据利润提成. 利润(I)低于或等于10万元时,奖金可提10%: 利润高于10万元,低于20万元时,低于10万元的部分按10%提成, 高于10万元的部分,可提成7.5%:20万到4 ...

  10. Python开发【第二章】：数据类型

    基本数据类型 一.整型 如: 18.73.84 整型具备如下功能: class int(object): """ int(x=0) -> int or long i ...