1.float属性

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

2.clear属性

案例：

一列三行布局：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.         *{
  8.             margin: 0px;
  9.             padding: 0px;
  10.         }
  11.         #contain{
  12.             margin: 0 auto;
  13.             width: 1000px;
  14.             height: 500px;
  15.             /*background-color: red;*/
  16.         }
  17.         #header{
  18.             height: 200px;  /*宽度默认是父级元素的100%，要给高度把盒子撑开*/
  19.             background-color: #6cf;
  20.             margin-bottom: 5px;
  21.         }
  22.         #main{
  23.             height: 500px;
  24.             background-color: green;
  25.             margin-bottom: 5px;
  26.         }
  27.         #footer{
  28.             height: 100px;
  29.             background-color: #6cf;
  30.             margin-bottom: 5px;
  31.         }
  32.     </style>
  33. </head>
  34. <body>
  35.     <div id="contain">
  36.         <div id="header"></div>
  37.         <div id="main"></div>
  38.         <div id="footer"></div>
  39.     </div>
  40. </body>
  41. </html>

左右布局：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         #contain{
  12.             margin: 0 auto;
  13.             height: 500px;
  14.             width: 1000px;
  15.         }
  16.         #side{
  17.             float: left;
  18.             width: 300px;
  19.             height: 500px;
  20.             background-color: green;       /*如果不加margin-right，把main的浮动方式改为right，也可以实现左右布局，中间仍然有5px的间隙*/
  21.             margin-right: 5px;
  22.         }
  23.         #main{
  24.             float: left;
  25.             width: 695px;
  26.             height: 500px;
  27.             background-color: blue;
  28.         }
  29.     </style>
  30. </head>
  31. <body>
  32.     <div id="contain">
  33.         <div id="side"></div>
  34.         <div id="main"></div>
  35.     </div>
  36. </body>
  37. </html>

3行2列布局：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.         *{
  8.             padding: 0;
  9.             margin: 0;
  10.         }
  11.         #contain{
  12.             margin: 0 auto;
  13.             width: 1000px;
  14.             height: 600px;
  15.         }
  16.         #header{
  17.             height: 200px;
  18.             background-color: blue;
  19.             margin-bottom: 5px;
  20.         }
  21.         #main{
  22.             height: 600px;
  23.             margin-bottom: 5px;
  24.         }
  25.         #side{
  26.             height: 600px;
  27.             width: 200px;
  28.             float: left;
  29.             background-color: red;
  30.         }
  31.         #mains{
  32.             height: 600px;
  33.             width: 795px;
  34.             float: right;
  35.             background-color: green;
  36.         }
  37.         #footer{
  38.             height: 100px;
  39.             background-color: pink;
  40.         }
  41.  
  42.     </style>
  43. </head>
  44. <body>
  45.     <div id="contain">
  46.         <div id="header"></div>
  47.         <div id="main">
  48.             <div id="side"></div>
  49.             <div id="mains"></div>
  50.         </div>
  51.         <div id="footer"></div>
  52.     </div>
  53. </body>
  54. </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. beyond Compare 30天过期后的处理办法

    打开Beyond Compare 4,提示已经超出30天试用期限制,解决方法: 修改C:\Program Files\Beyond Compare 4\BCUnrar.dll,这个文件重命名或者直接删 ...

  2. solr搜索结果转实体类对象的两种方法

    问题:就是把从solr搜索出来的结果转成我们想要的实体类对象,很常用的情景. 1.使用@Field注解 @Field这个注解放到实体类的属性[字段]中,例如下面 public class User{ ...

  3. Appium移动自动化测试-----（四）安装 appium Server

    我们可以在Appium官方网站上下载操作系统相应的Appium版本. https://bitbucket.org/appium/appium.app/downloads/ 当前最新版本为 Appium ...

  4. English Grammar in Use - Part1 Present and past

    Unit 1 Present continuous (I am doing) A) Am/is/are + -ing is the Present continuous. B) I am doing ...

  5. （转） [组合数学] 第一类，第二类Stirling数，Bell数

    一.第二类Stirling数 定理:第二类Stirling数S(p,k)计数的是把p元素集合划分到k个不可区分的盒子里且没有空盒子的划分个数. 证明:元素在哪些盒子并不重要,唯一重要的是各个盒子里装的 ...

  6. OOM与StackOverFlow发生的原因及解决办法【待完成】

    1,Out Of Memery 内存耗尽 1,1 产生原因 1.1.1 内存用完[堆内存] package com.cnblogs.mufasa; import org.junit.Test; imp ...

  7. dapper 参数不定时用这种方法动态参数

    string where = null; var p = new DynamicParameters(); if (classId != null) { where = " and clas ...

  8. ElementUI动态表格数据转换formatter

    elementUI的表格初始化比较简单,声明prop值对应的字段名即可. 而在实际应用中,我们常常有这种需求:从服务器获取的数据并不是我们要显示的最终结果,涉及一些状态.类型.日期时间等的转换,这时候 ...

  9. 通透理解viewport

    摘自:https://blog.csdn.net/u014787301/article/details/44466697 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewpor ...

  10. 1+x证书学习日志——css 基本选择符

    ##css选择符                 1:类型选择符 直接用标签名称当作选择符                     特点:选中所有同类元素                 2:id名称 ...