清除浮动影响的方法

最新推荐文章于 2021-04-13 17:30:18 发布
最新推荐文章于 2021-04-13 17:30:18 发布
阅读量242 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CZM_886/article/details/74946784
版权

清除浮动影响的方法

1、给父盒子夹高度    元素由内容撑起  （不常用）

2、给后面的父盒子加上  clear：both；    父盒子的margin失效

3、外墙法    在浮动的父盒子之间加一个div，该div样式为：clear：both；  父盒子没有高度

4、内墙法    浮动的父盒子最前面或最后面加一个div，样式为：clear：both；    会出现很多无用div

5、overflow：hidden；    给第一个浮动的父盒子加上该属性    溢出盒子的部分隐藏起来
CZM_886
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
清除浮动影响4种方法
chunmeizhang_88的博客
12-23 250
<!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> li { float: left;
清除浮动影响
Andone_hsx的博客
12-17 1355
任务描述 本关任务：清除浮动。 效果如下： 相关知识 为了完成本关任务，你需要掌握：1.浮动出现的问题，2.清除浮动的方法。 浮动出现的问题 基本的html结构如下： &lt;div class="container"&gt; &lt;div class="box1"&gt; &lt;p&gt;我是box1不浮动的内容 &lt;/p&gt; &lt;div class=&q
三种方法消除浮动带来的影响
此博客停止维护和更新，已转移https://github.com/ilvseyinfu/blog
08-29 1242
.container{ border:1px solid red; /*overflow: hidden;*/ /* 所以，这是消除浮动的第二种方法 给包含浮动元素的父标签添加css属性 overflow:auto; 下面我们来回顾下overflow这个属性： overflow这个属性规定内容溢出元素框时发生的事情 scroll：内容会
清除浮动带来的影响
HonoraSu的博客
03-13 2062
给父级元素设置一个高度 不管子级元素是否有内容，父元素的高度都是一定的 给父级元素设置一个CSS属性overflow:hidden; 子元素设置浮动后，脱离文档流，给父元素设置overflow:hidden;，把子元素拉回文档流内 在所有设置浮动的元素后加这句话&lt;div style="clear: both;"&gt;&lt;/div&gt; 利用伪元素来清楚浮动带来的影响–常...
CSS清除浮动方法总结
09-25
为了解决这个问题，开发者通常会采用一些方法来“清除浮动”。以下是对这些清除浮动方法的详细解释： 1. 加入空`div`并设置`clear: both`： 这是早期常用的清除浮动方法。在浮动元素之后添加一个额外的`<div>`元素...
CSS 清除浮动方法大全
09-25
CSS 清除浮动是网页布局中至关重要的一个概念，主要是为了解决元素浮动后对其周围元素产生的影响，防止内容被浮动元素覆盖或布局混乱。浮动元素通常用于创建多列布局，但如果不进行适当的清除，可能会导致父元素高度...
CSS 清除浮动元素方法 整理
09-25
在现代浏览器中，可以考虑使用Flexbox或Grid布局，它们提供了更为强大和灵活的布局机制，不再需要传统的浮动和清除浮动的方法。然而，在向后兼容性和老式浏览器的支持方面，浮动和清除浮动仍然是一个重要的CSS概念。
常用的清除浮动的方法
09-27
本文将深入探讨四种常见的清除浮动的方法，以便在实际开发中做出最佳选择。 1. **添加块级新元素并设置`clear: both`** 这种方法是在父元素内部添加一个新的块级元素，如`<div class="new"></div>`，并为其设置CSS...
CSS清除浮动的方法详解
09-24
为了解决这个问题，开发者们发展出多种清除浮动的方法。下面，我们将详细介绍这些方法，并分析它们的优缺点。 1. **使用带clear属性的空元素** 这是最传统的方法，通常在浮动元素后面添加一个空的`<div>`元素，并...
清除浮动影响的几种方法
小陈同学的博客
09-14 3109
今天分享的是清除浮动的几种方法，当我们在布局的时候，图如下： 而我们想实现的是（1）里头的元素还在框里但是保持一行，（2）框的高度跟随里头最高的元素。 我知道有很多方式可以做，但今天我们要讲的是和浮动有关，所以只用float来说。 我们都知道只要father不设置高，它会随着里头元素的大小来撑开盒子。（我相信还没有人不知道把？不知道也没事，你现在知道了嘿嘿嘿） 实现之前代码如下： .father{ border: 1px solid orange; width: 700px; } .son1{ wi
清除浮动的影响的方法
shlixia的博客
07-11 356
3 1.给父盒子加上高度（项目中不常用）因为我们的元素基本上是由内容撑起高度。不会给固定高度2.给后面的父盒子加上clear:both（浮动清除，但是父盒子的margin失效了：父盒子塌陷了）会引起父盒子的margin失效，不推荐使用。3.外墙法（在浮动的两个父盒子之间加上一个div，这个div样式为clear：both）这时候，浮动清除了，margin也出现了。但是父盒子还是没有高度4.内墙法（在
清除浮动的四种方法
Mr_yq的博客
11-29 1134
清除浮动影响的4种方法：（推荐使用方案四，兼容性最好） 方案一.clearfix{clear:both;} 原理：在父元素中，追加空子元素，并设置其clear属性为both  clear是css中专用于清除浮动的属性  作用：清除当前元素前面的元素浮动所带来的影响  取值：  1、none  默认值，不做任何清除浮动的操作  2、left  清除前面元素左浮动带来的影响 
前端学习笔记--清除元素浮动
kunzedang_9528的博客
03-10 298
浮动的元素不占有高度，会自动上浮； 因为父盒子不方便给高度， 所以为了解决子盒子浮动不占有高度位置，让父盒子没有高度也不影响标准流盒子。所以需要清除浮动。 清除浮动的本质就是清除浮动元素造成的影响。 语法：clear:both(清除左右两侧浮动的影响) 清除浮动的策略是：闭合浮动：只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。 清除浮动的方法： 额外标签法也称为隔墙法，是W3C推荐的。 原理： 找到最后一个浮动的盒子，添加一个标签（必须是块级元素），给标签添加style clear: both
浮动带来的问题，以及清除浮动影响的方式
F-ZERO-F的博客
10-03 3656
查阅多篇资料，最初使用浮动float是为了让文字环绕图片，这样显示的效果会更好一点；因为元素使用浮动之后元素就具有了块级元素和行级元素的特点，不仅可以设置宽高也能设置在水平方向上的排列布局； 到现在由于浮动所带来的问题有两个： 问题一：父元素高度坍塌 &amp;lt;style&amp;gt; #father{ border: 3px solid black; ...
CSS 系列四 浮动 和 清除浮动
m0_55170432的博客
04-13 350
--------------------------- 四 浮动 float --------------------------- 1.1 传统网页布局的三种方式 CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)： 普通流（标准流） 浮动 定位 1.2 标准流（普通流/文档流） 所谓的标准流: 就是标签按照规定好默认方式排列. 块级元素会独占一行，从上向下顺序排列。 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table 行内元素会按照顺序，从左到右顺序
浮动带来的影响以及怎么清除浮动
weixin_42143048的博客
02-12 2336
一、浮动带来的影响 float:left/right;原来是用来解决文字环绕的，后来发现做布局也可以，于是float布局在我们的布局中便经常使用了。float可以让块级元素在一行排列，大大方便了页面的布局，但是float也带来了一些问题，其中最大的影响便是高度坍塌的问题，即当我们给子元素设置了float属性，子元素的父级没有设置宽高时，我们将会发现父元素的宽度为子元素的宽度，但是高度却为0。当我们...
如何清除浮动带来的影响
xiaopeng_han123的博客
10-24 741
如何清除浮动带来的影响在前端开发中，清除浮动的方法有多种，开发人员可以根据自己的喜好选择不同的方式。 给父元素添加一些属性 添加空div元素 本人经历的特殊情况 父元素添加属性1、将设置float的元素的父元素也设置float。　　父元素也设置浮动，局限性较大。3、设置父元素的overflow为hidden。4、设置父元素的display为inline-block。　　缺点：可能不符合情况要求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值