CSS-float与float造成的影响以及解决办法-七

最新推荐文章于 2023-01-31 20:14:15 发布

@浩轩

最新推荐文章于 2023-01-31 20:14:15 发布

阅读量340

点赞数

分类专栏： CSS 文章标签： css3

本文链接：https://blog.csdn.net/HAOXUAN_/article/details/107480636

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

浮动：
是让两个有宽高的盒子并排,可以让这两个盒子转成行内块。但是有个小问题，盒子之间有空白

浮动的诞生就可以让元素并排，并且还可以设置宽高
特点：
	1、相互贴靠；2、浮动的 元素可以设置宽高；3、脱离标准流（脱标）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        
        .box2 {
            background-color: burlywood;
            float: left;
        }
        
        span {
            width: 100px;
            height: 100px;
            background-color: crimson;
            float: left;
        }
    </style>
</head>

<body>
    <!--
    让两个有宽高的盒子并排,可以让这两个盒子转成行内块
    但是有个小问题，盒子之间有空白

    浮动的诞生就可以让元素并排，并且还可以设置宽高
    特点：1、相互贴靠；2、浮动的 元素可以设置宽高；3、脱离标准流（脱标）
    
-->
    <!-- 
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
     -->
    <span>123</span>
    <span>456</span>
    <p>123456</p>
</body>

</html>

浮动的元素可能会对后续元素布局造成影响，所以一般清楚浮动
清楚浮动的方法：
1、给浮动的父亲设置高度（有高度的浮动可以关闭浮动）
不灵活，实际开发中，父亲高度一般是靠儿子撑开的
2、clear：both;
在父亲末尾增加一个元素，给这个元素设置属性clear：both;
此时清楚浮动，并且父亲的高度也被撑开
缺点：多了html结构
3、给浮动元素得父级增加一个属性：overflow:hidden;
4、是第二种清除浮动的升级版可以使用

父级：after{               /* 默认是行内元素*/
		content:'';             /*这个属性一定要加*/
    	display:block;         /* 转换成块级*/
		clear:both;
		}

                5、最优方法 可以反复使用    after伪元素ie7一下不兼容

.clearfix:after{
	content:'';
    display:block;
    clear:both;
    }
/*不用伪元素*/
.clearfix{
	 *zoom:1;
     }

@浩轩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-float与float造成的影响以及解决办法-七

浮动：是让两个有宽高的盒子并排,可以让这两个盒子转成行内块。但是有个小问题，盒子之间有空白浮动的诞生就可以让元素并排，并且还可以设置宽高特点： 1、相互贴靠；2、浮动的元素可以设置宽高；3、脱离标准流（脱标）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w
复制链接

扫一扫

专栏目录