1.浮动float

　　div配合float浮动来做页面的布局，浮动最常用的地方就是用来做布局。只有一个标签设置了浮动float属性，就会变成块级标签。

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>10float页面布局示例</title>

    <style>

        * {

            margin: 0px;

            padding: 0px;

        }

        .c1 {

            height: 1000px;

            width: 20%;

            background-color: darkslategrey;

            float: left;    /* 使用浮动属性，将div1和div2两个块级标签横向推挤在一起。如果两个标签能够摆在一排，就会浮动到一起  */

        }

        .c2 {

            height: 1000px;

            width: 80%;

            background-color: black;

            float: left;

        }

    </style>

</head>

<body>

<!-- 设置一个div占用屏幕左侧的百分20，一个div占屏幕右侧的百分之80 -->

<div class="c1"></div>

<div class="c2"></div>

</body>

</html>

2.清除浮动clear属性

（1）利用伪元素具有clear清除浮动的属性来解决父标签塌陷的问题（父标签撑不起来的问题）

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>11清除浮动示例</title>

    <style>

        /* 通用样式将整个浏览器的外边距与内边距设置为0 */

        * {

            margin: 0;

            padding: 0;

        }

        #d1 {

            border: 1px solid black;

        }

        .c1,

        .c2 {

            float: left;    /* 左浮动 */

            height: 100px;

        }

        /*.c3 {*/

            /*!*height: 100px;*!*/

            /*clear: left;*/

        /*}*/

        /* 在d1这个标签的最后加一个伪元素,伪元素的内容为空，但具有清除浮动的属性，解决了父标签塌陷问题*/

        #d1:after {

            content: "";

            clear: left;

            display: block;

        }

    </style>

</head>

<body>

<div id="d1">

    <div class="c1">c1</div>

    <div class="c2">c2</div>

</div>

</body>

</html>

3.overflow溢出属性

（1）利用overflow溢出属性做圆形头像的例子

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>12overflow示例</title>

    <style>

        .c1 {

            width: 120px;

            height: 120px;

            border: 1px solid black;

            /*overflow: scroll;   !* 当内容溢出时，则会使用滚动条，防止内容溢出 *!*/

            overflow: auto;     /* 同样是增加了滚动条来防止溢出*/

        }

        /* 使头像变成圆形的例子 */

        .header-img {

            width: 120px;

            height: 120px;

            border: 2px solid #FF0000;

            border-radius: 100%;    /* 圆形边框 */

            overflow: hidden;   /* 如果内容溢出了则隐藏掉溢出的部分 */

        }

        img {

            max-width: 100%;    /* 设置图片的最大宽度为100%，也就是和父标签一样大 */

        }

    </style>

</head>

<body>

<!-- 由于文本内容过多，文本内容超过了父标签的长和高，则发生内容了溢出 -->

<div class="c1">海燕啊，你可长点心吧燕啊，你可长点心吧。燕啊，你可长点心吧。燕啊，你可长点心吧。燕啊，你可长点心吧。。</div>

<!-- 利用overflow溢出的属性来完成圆形的头像，设置好了父标签的大小，在父标签里用一个字标签设置图片，子标签的图片比父标签大的话，则利用子标签的max-width: 100%来解决，圆形利用父标签的溢出属性解决 -->

<div class="header-img">

    <img src="huluwa.png" alt="">

</div>

</body>

</html>

4.清除浮动示例

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>float下午版</title>

    <style>

        #d1 {

           border: 1px solid black;

        }

        .c1 {

            height: 50px;

            width: 50px;

            background-color: blue;

            border: 1px solid red;

            float: left; /* 增加左浮动属性 */

        }

        /* 清除浮动的副作用，高度不会跑了 */

        /*.c2 {*/

            /*background-color: darkslategrey;*/

            /*clear: left;  !* 清除左浮动，有了这句话就可以让d1标签撑起来了，左边不能有浮动的元素 *!*/

        /*}*/

        /* 另外一种清除浮动副作用的方法 */

        /*#d1:after {*/

            /*content: '';*/

            /*clear: both;*/

            /*display: block;*/

        /*}*/

        /* 使用类样式进行清除浮动,之后只要需要清除浮动，标签都可以使用这个样式 */

        .clearfix:after {

            content: '';

            clear: both;

            display: block;

        }

    </style>

</head>

<body>

<div id="d1" class="clearfix">

    <div class="c1"></div> <!-- c1的浮动属性会导致d1这个父标签的高度撑不起来 -->

    <div class="c1"></div>

    <div class="c1"></div>

    <div class="c1"></div>

    <div class="c2"></div>

</div>

<div class="c3">我是解药</div>

</body>

</html>

CSS浮动和清除浮动的更多相关文章

  1. css用clearfix清除浮动

    本文从http://www.studyofnet.com/news/196.html复制.   本文导读:写css 时总为浮动而烦恼,如果用了浮动,浮动的父层不会跟着浮动框的高度增加而增加,在Fire ...

  2. css 浮动和清除浮动

    在写页面布局的过程中,浮动是大家经常用的属性.在好多的排版布局中都是用的的浮动比如说下面这些地方都是应用到了浮动. 在我学习浮动的时候可是熬坏了脑筋,在这里我分享一下我对浮动这块知识的总结. 一.浮动 ...

  3. 【转】CSS中的浮动和清除浮动

    以下转自<CSS中的浮动和清除浮动,梳理一下!> 浮动到底是什么? 浮动核心就一句话:浮动元素会脱离文档流并向左/向右浮动,直到碰到父元素或者另一个浮动元素.请默念3次! 浮动最初设计的目 ...

  4. [Web 前端] CSS篇之2. 清除浮动，什么时候需要清除浮动，清除浮动都有哪些方法

    cp: https://blog.csdn.net/zengyonglan/article/details/53304487 2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法 ? 一.什么时 ...

  5. 浅谈css中浮动和清除浮动带来的影响

    有很多时候,我们都会用到浮动,而我们有时候对浮动只是一知半解,却不是太清楚它到底是怎么回事,不知道各位有没有和我一样的感觉,只知道用它,却不知道它到底是怎么回事,所以,在学习的过程中,就要把一个概念不 ...

  6. CSS浮动与清除浮动(overflow)例子

    在css中浮动与清除浮动功能是我们开发中常用到的一个功能了,下面小编来为各位分析关于CSS浮动与清除浮动(overflow)例子吧． float脱离文本流,可是为什么文字却会有环绕的效果,这点实在是神 ...

  7. 重温前端基础之-css浮动与清除浮动

    文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行,并在每行中按从左到右的顺序排放元素.脱离文 ...

  8. CSS中如果实现元素浮动和清除浮动，看这篇文章就足够了

    浮动基本介绍 在标准文档流中元素分为2种,块级元素和行内元素,如果想让一些元素既要有块级元素的特点也同时保留行内元素特点,只能让这些元素脱离标准文档流即可. 浮动可以让元素脱离标准文档流,可以实现让多 ...

  9. float浮动与清除浮动

    浮动: 浮动的框可以左右移动,直到它的边缘碰到包含框或另一个浮动框的边框为止.文档的普通流中的块框会当浮动框不存在一样.但会影响内联框(通常是文本)的排列. 属性值有:left,right,none; ...

随机推荐

  1. Linux文件系统和管理-2文件操作命令（中）

    创建空文件和刷新时间 touch touch命令可以用来创建空文件或刷新文件的时间 touch 存在的文件刷新时间,不存在的文件创建空文件 生成指定日期的日志文件 [root@C8-1 ~]# dat ...

  2. windows注册redis为服务,zookeeper为服务

    windows注册redis为服务,zkserver为服务 1.redis部分 通过redis内置工具安装 进入redis安装目录 1.shift+鼠标右键打开菜单,点击"在此处打开命令窗口 ...

  3. jenkins自动拉取git分支构建项目

    一,创建jenkins项目 new item ->freestyle project, 自定义一个项目名称 二,配置项目 1,Source Code Management 选择 git,输入gi ...

  4. 将书法字体制作成pcb库文件，并使用该字体作为logo印制在自己设计的电路板上。

    本文主要介绍,如何将写在纸张上的书法制作成pcb库文件,以达到如下效果: 形成具有镂空效果的标记,印制在PCB电路板上,一图logo位于top overlayer,是镂空丝印,二图位于top laye ...

  5. AtCoder 1807 食塩水

    题意 有 \(n\) 瓶食盐水,第 \(i\) 瓶为质量 \(w_i\),浓度 \(p_i\%\) 的食盐水,需要选出 \(k\) 瓶食盐水混合在一起,问最大浓度. \(\texttt{Data Ra ...

  6. Gym102012G Rikka with Intersections of Paths

    题意 \(T\) 组数据,每组数据给定一棵 \(n\) 个点的树和 \(m\) 条路径,求选出 \(k\) 条给定路径使得至少有两条交于一点的方案数,对 \(10^9+7\) 取模. \(\textt ...

  7. TypeError: render() got an unexpected keyword argument ‘renderer‘

    关注公众号"轻松学编程"了解更多 原因 在使用xadmin时,如果是Django2版本以上的会报这个错误.这是由于xadmin中的文件xadmin\views\dashboard. ...

  8. 我用 Python 撸了一个 plist 图集拆图工具！附上github源码

    这些年,我一直在使用 JavaScript .CocosCreator 做开发,只要是他们不能解决的,我都不太愿意去弄,或者说是不太情愿去做.真的是手中有把锤子,看什么都是钉子,越是熟悉一样东西,越容 ...

  9. git使用心得体会

    序言:身为软件工程的学生却一直没有接触Git,实在有些羞愧.得益于孟宁老师的课程,让我对Git有了初步的认识.同样借由此次机会正式接触Git这款程序员必备工具. 参考文献:https://mp.wei ...

  10. socket http1

    /*****************************************************************///name          : myhttp.h//funct ...