<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>登录界面</title>

    <style type="text/css">

    #a,#b,#c{

        height: 80px;

        width:120px;

        border: solid 1px pink;

        float: left;  /*左浮动*/

       /* float: right;  /!*右浮动*!/*/

    }

    #main{

        width: 350px;

        height: 150px;

        border: solid 1px red;

        overflow: scroll;

         /*内容溢出的默认属性值

         visible:默认值  溢出部分显示

         scroll：溢出部分滚动条显示

         hidden:溢出部分隐藏

         auto:自动调整

         */

    }

    </style>

</head>

<body>

<div id="main">

    <div id="a">这是第1个盒子</div>

    <div id="b">这是第2个盒子</div>

    <div id="c">这是第3个盒子</div>

</div>

</body>

</html>
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>display</title>

    <style type="text/css">

        span{

            /**

            display：属性

            block：块元素

            none:不显示

            inline：行内元素

            inline-block：块元素 在一行显示

            */

            display: block;/* 块元素*/

            height: 20px;

            width: 200px;

            border: 1px solid red;

        }

        div{

            height: 20px;

            width: 200px;

            border: 1px solid red;

            display: inline;/*行内元素*/

        }

    </style>

</head>

<body>

 <div>这是一个div1</div>

 <div>这是一个div2</div>

 <span>这是一个span1</span>

 <span>这是一个span2</span>

</body>

</html>
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>防止父级边框塌陷</title>

    <link href="css/float.css" rel="stylesheet" type="text/css"/>

</head>

<body>

<div id="father" class="clear"><!--04.使用after伪类-->

    <div class="layer01"><img src="data:image/photo-1.jpg" alt="日用品"/></div>

    <div class="layer02"><img src="data:image/photo-2.jpg" alt="图书"/></div>

    <div class="layer03"><img src="data:image/photo-3.jpg" alt="鞋子"/></div>

    <div class="layer04">

        浮动的盒子可以向左浮动，也可以向右浮动，直到它的外边缘碰到包含框或另一个浮动盒子为止。本网页中共有三个图片，分别代表日用品图片、图书图片和鞋子图片。这里使用这三个图片和本段文字来演示讲解浮动在网页中的应用，根据需要图片所在的div分别向左浮动、向右浮动，或者不浮动。

    </div>

    <!-- 01. 空div  防止父级边框塌陷

    <div class="clear"></div>-->

</div>

</body>

</html>
div {

    margin:10px;

    padding:5px;

}

#father {

    border:1px #000 solid;

    /*02.给父级设置高度防止边框塌陷

    height: 350px;*/

    /*03.overflow防止边框塌陷

    overflow: hidden;*/

}

.layer01 {

    border:1px #F00 dashed;

    float: left;

}

.layer02 {

    border:1px #00F dashed;

    float: left;

}

.layer03 {

    border:1px #060 dashed;

    float: left;

}

.layer04 {

    border:1px #666 dashed;

    font-size:12px;

    line-height:23px;

    width: 200px;

    float: left;

}

/*04.after伪类防止父类边框塌陷*/

.clear:after{

    content: ''; /*在clear元素之后添加一个空内容*/

    display: block;/*把添加的内容转换成了块元素*/

    clear: both;/*清除这个元素所有的浮动*/

}

/* 01.空div标签

.clear{

    clear: both;

    margin: 0px;

    padding: 0px;

}*/
<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style  type="text/css">

       #main{

           width: 200px;

           height: 150px;

           border: 1px solid orange;

           /**

           visible：默认值！内容不会隐藏，但是会在盒子之外显示！

           hidden：溢出的部分会隐藏！

           scroll:显示横向和纵向的滚动条

           auto:显示纵向的滚动条

           */

           overflow:hidden ;

       }

    </style>

</head>

<body>

  <div  id="main">

      <img src="data:image/wine.jpg">

      <p>这是一张图片这是一张图片这是一张图片这是一张图片这是一张图片

          这是一张图片这是一张图片这是一张图片这是一张图片这是一张图片

          这是一张图片这是一张图片这是一张图片这是一张图片这是一张图片

          这是一张图片这是一张图片这是一张图片这是一张图片这是一张图片</p>

  </div>

</body>

</html>

css09浮动属性的更多相关文章

  1. 给li设置float浮动属性之后，无法撑开外层ul的问题。

    最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...

  2. 给li设置float浮动属性之后，无法撑开外层ul的问题。（原址：http://www.cnblogs.com/cielzhao/p/5781462.html）

    最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...

  3. [转] CSS float 浮动属性

    http://www.cnblogs.com/polk6/p/3142187.html CSS float 浮动属性 本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录: 1. 页面布局方式: ...

  4. 浅谈CSS浮动属性

    要介绍css的float浮动属性,就必须先了解一下标准文档流 标准文档流:   在没有css的干预下,块级元素独占一行,可以设置宽高,行内元素并排显示,宽高自动填充.   HTML页面的标准文档流(默 ...

  5. 【CSS学习】--- float浮动属性

    一.前言 浮动元素以脱离标准流的方式来实现元素的向左或向右浮动,并且浮动元素还是在原来的行上进行浮动的.float浮动属性的四个参数:left:元素向左浮动:right:元素向右浮动:none:默认值 ...

  6. [Web前端] 给li设置float浮动属性之后，无法撑开外层ul的问题。

    cp from : https://www.cnblogs.com/cielzhao/p/5781462.html 最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style ...

  7. 浮动属性（float)

    (1.浮动是一种脱离标准文档流的形式. 作用:浮动就是用来制作多个盒子并排显示,也能设置宽高,负责网页排版 1 float:left;  左浮动 2 float:right; 右浮动 3 float: ...

  8. CSS浮动属性，知道原理就很简单,灵活控制块级元素在一行内显示

    在页面布局中,有两个非常常用的CSS属性.它们巧妙的控制着块级元素们之间的位置,灵活的让块级元素在一行内显示或者另起一行.说到这里,相信大家已经猜出来了,这两个属性就是控制块级元素浮动的属性.整个页面 ...

  9. CSS基础之浮动属性float图文详解

      宏观地讲,我们的web页面的制作,是个“流”,必须从上而下,像“织毛衣”.   标准流里面的限制非常多,导致很多页面效果无法实现.如果我们现在就要并排.并且就要设置宽高,那该怎么办呢?办法是:超脱 ...

随机推荐

  1. bootstrap首页制作

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>我的 ...

  2. JavaScript奇技淫巧44招

    JavaScript是一个绝冠全球的编程语言,可用于Web开发.移动应用开发(PhoneGap.Appcelerator).服务器端开发(Node.js和Wakanda)等等.JavaScript还是 ...

  3. IOC-控制反转(Inversion of Control),也成依赖倒置(Dependency Inversion Principle)

    基本简介 IoC 亦称为 “依赖倒置原理”("Dependency Inversion Principle").差不多所有框架都使用了“倒置注入(Fowler 2004)技巧,这可 ...

  4. [javascript]event属性

    1.clientX和clientY clientX和clientY是事件发生时,鼠标离浏览器可视文档区域左上角的位置 2.offsetX和offsetY offsetX和offsetY是事件发生时,鼠 ...

  5. windows下apache配置ssl（https）服务器

    SSl是为Http传输提供安全的协议,通过证书认证来确保客户端和网站服务器之间的数据是安全, 可以通过apache自带的openssl进行配置: 步骤如下: 1.安装有openssl模板的apache ...

  6. Thinkphp---练习：数据的增删改查

    利用ThinkPHP连接数据库的增删改查的例题:用到的数据库表名Info表,Nation表 数据显示页面:MainController.class.php中的方法(增删改查全包括--function ...

  7. Python hashlib模块 （主要记录md5加密）

    python提供了一个进行hash加密的模块:hashlib 下面主要记录下其中的md5加密方式(sha1加密一样把MD5换成sha1) >>> import hashlib > ...

  8. 驱动读写进程内存R3,R0通信

    stdafx.h 头文件代码 #ifndef _WIN32_WINNT // Allow use of features specific to Windows XP or later. #defin ...

  9. ARM内核和架构都是什么意思，它们到底是什么关系？

    ARM产品越来越丰富,命名也越来越多.很多朋友提问: ARM内核和架构都是什么意思?内核和架构的关系是什么?比如ARMv7架构,这个架构指的是什么?小编选出了几个精彩回答!希望对嵌友们在选择设计电路时 ...

  10. python之路——爬虫实例

    urlController.py import bsController from urllib import request class SpiderMain(object): def __init ...