CSS浮动和清除浮动

Wesley13
• 阅读 603

1.浮动float

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

CSS浮动和清除浮动

<!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>

CSS浮动和清除浮动

2.清除浮动clear属性

CSS浮动和清除浮动

CSS浮动和清除浮动

 (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>

 CSS浮动和清除浮动

3.overflow溢出属性

CSS浮动和清除浮动

 CSS浮动和清除浮动

(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>

CSS浮动和清除浮动

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浮动和清除浮动

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
CSS定位属性Position详解
CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fparan.io%2Fcssfloatattribute%2F)),另一个就是CSS定位属性Position。1\.position:static
Wesley13 Wesley13
3年前
CSS清除浮动的4种方式
1、使用空标签清除浮动。我用了很久的一种方法,空标签可以是div标签,也可以是P标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签清除浮动,并为其定义CSS代码:clear:both。此方法的弊端在于增加了无意义的结构元素。2、使用overflow属性。此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这