CSS给元素清除浮动影响的方法，--最全四种方法

最新推荐文章于 2022-06-30 13:57:46 发布
最新推荐文章于 2022-06-30 13:57:46 发布
阅读量189 收藏
点赞数
原文链接：http://www.cnblogs.com/Mykebai/p/9683994.html
版权

代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动方法一</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 500px;
            background-color: pink;
        }
        .son1,
        .son2{
            height: 200px;
            width: 200px;
            float: left;
        }
        .son1{
            background-color: blue;
        }
        .son2{
            background-color: skyblue;
        }
        .box{
            width: 600px;
            height: 200px;
            background-color: #000;
        }
        .clearfix{
            clear: both;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
        <!-- 在浮动元素的末尾添加一个空的标签  -->
        <div class="clearfix"></div>
    </div>
    <div class="box"></div>
</body>
</html>

代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动方法二</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 500px;
            background-color: pink;
            overflow: hidden;   /* 给父元素添加    overflow:hidden/auto/scroll */
        }
        .son1,
        .son2{
            height: 200px;
            width: 200px;
            float: left;
        }
        .son1{
            background-color: blue;
        }
        .son2{
            background-color: skyblue;
        }
        .box{
            width: 600px;
            height: 200px;
            background-color: #000;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
    <div class="box"></div>
</body>
</html>

 

 

代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动方法三</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 500px;
            background-color: pink;
            overflow: hidden;   /* 给父元素添加    overflow:hidden/auto/scroll */
        }
        .son1,
        .son2{
            height: 200px;
            width: 200px;
            float: left;
        }
        .son1{
            background-color: blue;
        }
        .son2{
            background-color: skyblue;
        }
        .box{
            width: 600px;
            height: 200px;
            background-color: #000;
        }
        /*给父元素添加类clearfix*/
        .clearfix:after{ 
            content: ".";              /* 这里尽量写点内容，否则在IE6-7会出现间隙 */
            dispaly: black;            /* 转换为块级元素 */
            height: 0;                 /* 高度为0 */
            clear: both;               /* 清除浮动 */
            visibility: hidden;        /* 隐藏盒子 */
        }
        .clearfix{
            *zoom: 1;    /* 这是专门给IE6-7做的清除浮动 */
        }
    </style>
</head>
<body>
    <div class="father clearfix">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
    <div class="box"></div>
</body>
</html>

代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动方法四</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .father{
            width: 500px;
            background-color: pink;
            overflow: hidden;   /* 给父元素添加    overflow:hidden/auto/scroll */
        }
        .son1,
        .son2{
            height: 200px;
            width: 200px;
            float: left;
        }
        .son1{
            background-color: blue;
        }
        .son2{
            background-color: skyblue;
        }
        .box{
            width: 600px;
            height: 200px;
            background-color: #000;
        }
        /*给父元素添加类clearfix*/
        .clearfix:before,
        .clearfix:after{
              content:"";
              display:table;   /*这句话可以触发BFC，BFC可以清除浮动*/
        }
        .clearfix:after{
             clear:both;
        }
        .clearfix{
              *zoom:1;
        }
    </style>
</head>
<body>
    <div class="father clearfix">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
    <div class="box"></div>
</body>
</html>

 

转载于:https://www.cnblogs.com/Mykebai/p/9683994.html

weixin_30892037
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
清除浮动的4种方式
奖励你一朵小红花❀的博客
01-26 837
前言: 首先我们要清楚 为什么要清除浮动？ 清除浮动主要为了解决父元素因为子元素浮动引起内部高度为0的问题 清除浮动的方法(最常用的4种) **1.额外标签法：**给谁清除浮动，就在某个元素后面添加一个空白的空标签 **优点：**通俗易懂，书写方便但是不推荐使用 **缺点：**添加许多无意义的标签，让结构复杂化 用法：我们给small清除浮动（在small后面添加一个空白的标签clear 类名可以随意写），然后设置clear:both; 代码展示: <div> <div class=
清除浮动的四种方法
A_home的博客
11-21 2769
浮动的元素会脱离标准流（文档流），浮动的盒子不再保留原先的位置，清除浮动的本质就是清除浮动元素带来的影响，策略——闭合浮动
清除浮动的方式有四种方法
m0_49456900的博客
03-06 415
利用浮动可以实现并排、网页布局。当盒子因为浮动影响布局时，就要清除浮动。 清除浮动的方法有四种： ①让父盒子形成BFC，设置overflow：hidden 属性； ②给后面的父盒子上设置clear：both 属性，clear表示清除其他盒子的浮动对自己的影响，both表示左右盒子的浮动都清除； ③使用::after伪元素给盒子添加最后一个子元素，并且给::after 设置clear：both属性和display：block属性； .clearfix { overflow:
在 HTML 中 清除浮动四种的方法
原地起飞
08-21 5065
文章目录为什么要清除浮动清除浮动本质一、语法二、清除浮动的方法1.额外标签法2.父级添加 overflow 属性3.父级添加 after 伪元素4.父级添加双伪元素 为什么要清除浮动     由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子（由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响）。 清除浮动本质 清除浮动的本质是清除浮动元素脱离标准流造成的影响 如果父盒子本身有高度，则不需要清除浮动 清除浮动之后，父级
CSS清除浮动的四种方法
weixin_43311978的博客
07-01 384
为什么要清除浮动？ 首先看一下下面这个布局 <style> .fatherBox{ width: 800px; border: 1px solid red; margin: 0 auto; } .first{ width: 200px; height: 150px; background-color: blue; } .second{ width: 300px; height: 200px; background-color: yellow; }
CSS 清除浮动元素方法 整理
09-25
通过在父元素上应用`.clearfix`类，我们可以创建一个看不见的内联块元素，这个元素会自动清除浮动。代码如下： ```css .clearfix:after { content: "."; /* 创建一个看不见的字符 */ clear: both; /* 清除浮动 */...
CSS实现元素浮动和清除浮动的方法
11-21
在标准文档流中元素分为2种，块级元素和行内元素，如果想让一些元素既要有块级元素的特点也同时保留行内元素特点，只能让这些元素脱离标准文档流即可。 浮动可以让元素脱离标准文档流，可以实现让多个元素排在同一...
CSS清除浮动使父级元素展开的三个方法
09-25
这种方法不需要指定具体高度，而是利用CSS的清除浮动功能来扩展父级元素。我们创建一个新的`.clear`类，并在`.content`后面添加一个包含这个类的空div。 ```html .clear { clear: both; } /* ... */ ...
清除css浮动的三种方法小结
09-24
在CSS布局中，浮动（float）是一种常见的方法，用于使元素在页面上并排显示，尤其是在创建多列布局时。然而，浮动元素会引起父元素高度塌陷的问题，即父元素无法自动扩展到包含所有浮动子元素的高度。为了解决这个...
CSS教程:闭合CSS浮动元素的几种方法
09-27
首先，一种传统的方法是在父容器内部添加一个额外的元素，使用`clear:both`样式来清除浮动。这可以通过在HTML中插入一个空的`<div class="clear"></div>`或使用`<br clear="all">`来实现。这种方法虽然兼容所有...
前端学习笔记--清除元素浮动
kunzedang_9528的博客
03-10 290
浮动的元素不占有高度，会自动上浮； 因为父盒子不方便给高度， 所以为了解决子盒子浮动不占有高度位置，让父盒子没有高度也不影响标准流盒子。所以需要清除浮动。 清除浮动的本质就是清除浮动元素造成的影响。 语法：clear:both(清除左右两侧浮动的影响) 清除浮动的策略是：闭合浮动：只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。 清除浮动的方法： 额外标签法也称为隔墙法，是W3C推荐的。 原理： 找到最后一个浮动的盒子，添加一个标签（必须是块级元素），给标签添加style clear: both
清除浮动的四种方式
赤蓝紫の博客
03-30 539
清除浮动的四种方式 浮动是什么 CSS 的 Float（浮动），会使元素向左或向右移动，直到外边缘碰到包含框或另一个浮动元素位置。 浮动元素的特征： 浮动的元素会脱离文档流 浮动的元素会紧挨在一起 浮动元素具有类似行内块元素的特性。所以行内元素有了浮动，不再需要转换为块级或行内块级元素元素 收缩。浮动的元素，如果没有设置width，会自动收缩为内容的宽度。比如块级盒子，如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，会收缩成内容的宽度 <style> div[clas
浮动及清除浮动
weixin_68485297的博客
04-06 1313
一、浮动 1、float： 用于浮动 left 元素向左浮动 right 元素向右浮动 non 默认值，元素不浮动 ①div盒子不加浮动，作为块级元素占据整行，文字会自动换行。 ②div盒子加了左浮动，float：left；呈现出一种文字环绕盒子的效果。 两种结果，见下图： 二、消除浮动 我们又感受到浮动的好处，但同样的使用了浮动以后一会造成一些影响，会造成父级高度塌陷。 解决父级边框塌陷的方法： 下图的蓝色和粉色盒子都给了100px的宽高，外面包裹的盒子只给了一个宽300p
清除浮动最常用的四种方法
热门推荐
weixin_44723072的博客
08-09 1万+
1、为什么要清除浮动 开发过程中，浮动是需要掌握的一个技能，页面布局当中，在无法确定子元素的高度（height）时，我们无法给父级标签一个固定的高度（height），我们想要的是，由子元素的高度去控制父元素的高度。 所以，当子元素设置了浮动（float）属性之后，父元素的高度没有进行设置，这样就会导致父元素的高度塌陷(原本的height被重置为0)，这就涉及到了清除浮动的重要性 2、清除浮动的三种方法 第一种方法：额外标签法 该方法是在浮动元素末尾添加一个空的标签，再给空标签添加一个清除浮动的样式，如下 h
CSS——清除浮动元素对当前元素所产生的影响
Bonsoir777的博客
06-30 1029
清除浮动元素对当前元素所产生影响的方法
清除浮动影响的几种方法
小陈同学的博客
09-14 3059
今天分享的是清除浮动的几种方法，当我们在布局的时候，图如下： 而我们想实现的是（1）里头的元素还在框里但是保持一行，（2）框的高度跟随里头最高的元素。 我知道有很多方式可以做，但今天我们要讲的是和浮动有关，所以只用float来说。 我们都知道只要father不设置高，它会随着里头元素的大小来撑开盒子。（我相信还没有人不知道把？不知道也没事，你现在知道了嘿嘿嘿） 实现之前代码如下： .father{ border: 1px solid orange; width: 700px; } .son1{ wi
html div元素浮动,CSS实现元素浮动和清除浮动的方法
最新发布
05-30
要清除浮动，可以使用clear属性，它能够清除浮动元素对后面元素的影响。例如： ```CSS .clearfix::after { content: ""; display: table; clear: both; /*清除浮动*/ } ``` 在这个例子中，使用了一个clearfix类...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值