<!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. Javascript深度克隆一个对象

    Javascript中的对像赋值与Java中是一样的,都为引用传递.就是说,在把一个对像赋值给一个变量时,那么这个变量所指向的仍就是原来对 像的地址.那怎么来做呢?答案是“克隆”. 克隆有两种方法:一 ...

  2. Windows Phone 使用 WriteableBitmap后台生成图片

    这几天项目是遇到一个需求,需要后台把几个元素生成到一张图片上,并保存到文件中 private void cutscreen_Click(object sender, EventArgs e) { Gr ...

  3. 文件上传-html

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>文件 ...

  4. Eclipse 将Java项目转为Dynamic web project

    1.打开项目根目次下的.project 在<buildSpec>节点下是否存在 <buildCommand> <name>org.eclipse.wst.commo ...

  5. php 4.X与5.x版本构造函数区别与类的继承

    今天看ecshop源码的时候发现 构造函数是和类名一样,以前没接触过,一下子疑惑啦 HP4.x 版本: PHP 4.x 的构造函数名与类名相同.        注意:在子类里父类的构造函数不会自动执行 ...

  6. MongoDB-性能优化之索引

    首先看一个实例 >;i<;i++){ db.indexdemo.insert({),"create":new Date});} WriteResult({ }) > ...

  7. AngularJs 【使用】 -- ng-repart 排序使用

    1.单字段 ng-repeat="item in dataList | orderBy:'field' " 2.多字段 ng-repeat="item in dataLi ...

  8. Android 开发中使用 SQLite 数据库

    SQLite 介绍 SQLite 一个非常流行的嵌入式数据库,它支持 SQL 语言,并且只利用很少的内存就有很好的性能. 此外它还是开源的,任何人都可以使用它.许多开源项目((Mozilla, PHP ...

  9. 转： memcpy的用法总结

    1.memcpy 函数用于 把资源内存(src所指向的内存区域) 拷贝到目标内存(dest所指向的内存区域):拷贝多少个?有一个size变量控制拷贝的字节数:函数原型:void *memcpy(voi ...

  10. mapreduce (二) MapReduce实现倒排索引(一) combiner是把同一个机器上的多个map的结果先聚合一次

    1 思路:0.txt MapReduce is simple1.txt MapReduce is powerfull is simple2.txt Hello MapReduce bye MapRed ...