(1)float的简单用法

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
width: 200px;
height: 50px;
background-color: aqua;
}
.div2{
width: 250px;
height: 100px;
background-color: red;
float: left;
        
}
/*如果加了float,则div3会被div2覆盖,因为div2设置了向左漂浮,会接着找上一个div1的尾部进行漂浮,叫重叠样式表*/
.div3{
width: 300px;
height: 150px;
background-color: violet;
}
.div4{
width: 450px;
height: 250px;
background-color: blue;
} </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div> </body>
</html>

  结果如图

如若div2和div3都设置了向左浮动,结果如图

如果div3加了clear:left,则不会放在div右边了,会在下面,也就是当div2不是浮动对象了

(2)position属性

1、fixed表示固定位置

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
width: 200px;
height: 50px;
background-color: aqua;
position: fixed;
}
/*static一般情况都是默认按这种情况,所以加不加都没影响这里*/
/*fixed表示固定位置,也是脱离了文档流,覆盖别的标签*/
.div2{
width: 250px;
height: 100px;
background-color: red; } .div3{
width: 300px;
height: 150px;
background-color: violet; }
.div4{
width: 450px;
height: 250px;
background-color: blue;
} </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div> </body>
</html>

  效果如图

2、relative表示根据自己之前的位置进行调整

如图

css的float和position属性的更多相关文章

  1. CSS float和position属性

    1. 浮动 CSS float属性定义了元素在水平方向的浮动.该元素从网页的正常流动(文档流)中移除,对于浮动元素后的块级元素,块级元素将会被浮动元素覆盖,并且会接着其上一个文档流中的元素,按文档流的 ...

  2. 总结一下CSS中的定位 Position 属性

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  3. CSS学习笔记——定位position属性的学习

    今天学习之前剩下的一个问题:CSS的position属性.首先归纳出和position相关的问题: position作为一个属性,它一共有哪几个属性值? position常用的属性值有哪几个?分别有什 ...

  4. [转]总结一下CSS中的定位 Position 属性

    在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...

  5. CSS之float vs position:absolute

    补充:ul 应该设置下 list-style: none; 题外话:看了张鑫旭的视频,这家伙把简单的css玩出了新花样,绝对大神级的存在.膜拜下先~ float的作用前面一章已经说过了,但没考虑过的是 ...

  6. DIV CSS布局中position属性用法深入探究

    本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...

  7. DIV-CSS布局中position属性详解

    本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...

  8. [转载]CSS元素的定位position

    CSS元素的定位position 属性position   值 描述 absolute                             生成绝对定位的元素,相对于 static 定位以外的第一 ...

  9. CSS中float和Clear的使用

    CSS中float和Clear的使用 本文和大家重点讨论一下CSS中Float和Clear属性的使用,一个float对象可以居左或居右,一个设置为float的对象,将根据设置的方向,左移或右移到其父容 ...

随机推荐

  1. Python核心编程——正则表达式

    本篇博客都是我认真读之后写的,有些地方和书上的语句一样…… 1.简介 正则表达式为高级的文本模式匹配.抽取.与/或文本形式的搜索和替换功能提供了基础.简单地说,正则表达式(简称regex)是一些由字符 ...

  2. UIButton 加载网络图片

    以后就可以 用这个分类   UIButton轻松加载网络图片了, UIButton+WebCache.h #import <UIKit/UIKit.h> @interface UIButt ...

  3. python_8_guess

    #python3和2都可以 #方法1 age_of_oldboy=56 count=0 while True: if count==3: break guess_age=int(input('gues ...

  4. Symfony相关网站参考

    http://www.doctrine-project.org/projects.html 数据库相关知识 http://firehare.blog.51cto.com/809276/703599整合 ...

  5. Java控制语句例题,for循环语句,if条件语句等,Scanner类与Random类,Math.max()方法

    例题:编写程序,生成5个1至10之间的随机整数,并打印结果到控制台 import java.util.Random;class demo09 { public static void main(Str ...

  6. Websocket教程SpringBoot+Maven整合

    1.大话websocket及课程介绍 简介: websocket介绍.使用场景分享.学习课程需要什么基础 2.课程技术选型和浏览器兼容讲解 简介: 简单介绍什么是springboot.socketjs ...

  7. win10如何修改host文件

    首先找到host文件,一般位于:C:\Windows\System32\drivers\etc 之后用记事本打开,直接修改.保存txt文件到桌面. 最后删除后缀名,再粘贴回去就可以了.

  8. 转:maven国内镜像(maven下载慢的解决方法)

    http://www.cnblogs.com/xiongxx/p/6057558.html https://jingyan.baidu.com/article/1876c8524ee0d0890a13 ...

  9. 【Python学习之八】ORM

    ORM 什么是ORM呢? ORM全称是:Object-Relational Mapping.即对象-关系映射,就是把关系数据库的一行映射为一个对象,也就是一个类对应一个表.这样,写代码更简单,不用直接 ...

  10. yum安装报错

    检查了好久才知道原来是 sudo nano /etc/sysconfig/network-scripts/ifcfg-ens33 下的DNS配错了,改好之后,sudo service network ...