浮动布局——margin & 闭合浮动

最新推荐文章于 2024-09-11 08:17:43 发布
最新推荐文章于 2024-09-11 08:17:43 发布
阅读量1k 收藏
点赞数
分类专栏： 布局 CSS 文章标签： css 浮动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lulalahappy123/article/details/45129775
版权
CSS 同时被 2 个专栏收录
17 篇文章 0 订阅
订阅专栏
布局
13 篇文章 0 订阅
订阅专栏
  • 实现一个浮动布局，红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化 示例1 示例2
  • <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>考察浮动</title>
    <style type="text/css">
        #content {
            background-color: red;
            position: relative;
            padding: 12px;/*red 的padding+blue的margin =测的宽 */
            overflow: hidden;/*父元素overflow:hidden 可以闭合浮动*/
        }
        .div-in {
            width:107px;
            height: 54px;
            background-color: blue;
            margin:6px;/*测的各间距是12  一半是6 *//*margin不合并，因为float,正常位置是合并的*/
            border:solid 1px #000000;
            float: left;
        }
    </style>
</head>

<body>
<div id="content">
    <div class="div-in"></div>
    <div class="div-in"></div>
    <div class="div-in"></div>
    <div class="div-in"></div>
    <div class="div-in"></div>
    <div class="div-in"></div>
    <div class="div-in"></div>
    <div class="div-in"></div>
    <div class="div-in"></div>
</div>
</body>
</html>
    正常情况下，div与div之间测的是12就设12就好了，但是这是浮动，浮动的margin没有合并，会叠加，所以叠加后是12px ,那么每个蓝色div margin设为6px;
  • 又测量红色背景边框据最近blue的div 距离是18px =6+12;
  • 所以设外层div padding :12px
  • 闭合浮动我这里用了父元素 设了overflow:hidden
  • 那些年我们一起清除过的浮动


梦jenny
关注
专栏目录
布局——浮动布局
QYXQYX_的博客
08-18 944
1.布局：元素默认的排列方式，往往这种默认的文档流满足不了我们的需求，所以出现了浮动布局 等。 2.浮动布局： float —— 属性名 属性值：left 向左浮动 ；right 向右浮动；none 【默认值】,不浮动；inherit 继承父元素 目的：浮动布局的主要用法是为了让块级元素在一行中显示（列级布局），或者让文字在图片的周围显示。浮动元素用来解决块级元素在X轴上的排列问题ted 使用方法：浮动布局通常出现在div这种父子结构...
CSS布局总结——盒模型，position定位，尺寸，水平居中垂直居中，浮动float，BFC
愚蠢的土拨鼠要变聪明的博客
09-27 1511
1.盒模型 盒子模型：每个元素，都会形成一个矩形块，主要包括四部分：margin(外边距)+border(边框)+padding(内边距)+content(内容) css中存在两种不同的盒子模型，可以通过box-sizing设置不同的模型。两种盒子模型，主要是width的宽度不同。如图： IE盒模型宽度=padding+content+border+margin   标准盒模型宽...
CSS之浮动布局（float，浮动原理，清除/闭合浮动方法）
weixin_30419799的博客
05-06 205
css之浮动布局 本人博客：查看文章 1.什么是浮动：在我们布局的时用到的一种技术，能够方便我们进行布局，通过让元素浮动，我们可以使元素在水平上左右移动，再通过margin属性调整位置 2.浮动的原理：使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘 3.浮动的生成：使用css属性float：left/right/none...
HTML + CSS - 网页布局之一般布局&浮动布局
最新发布
qq_51222843的博客
09-11 1374
讲解CSS中的一般布局以及浮动布局
浮动布局
minjiayanm的博客
11-11 448
浮动： 1.浮动是布局的一种方式：也是元素脱离文档流的方式 2.浮动 float 3.浮动范围：只能在父容器内部浮动，不能超出父容器 4.浮动后，相邻兄弟元素，均浮动，浮动后，会占据一个浮动位置 <div id="wraper" class="clearFix"> <div class="box one">&l...
前端——浮动与定位
qq_50628631的博客
05-04 899
目录 浮动 1.浮动定义和语法 2.浮动特性 3.清除浮动 4.清除浮动示例 定位 1.定位组成 1.定位模式 2.边偏移 2.固定定位常用技巧 3.定位示例 4.定位拓展 浮动 1.浮动定义和语法 定义：在一个模块上添加浮动会使模块脱离文档流，也就是在不再占用文档的位置。添加浮动也会使一个行内元素变成块元素。 语法： 选择器{ float:属性值； } 属性值 描述 none 元素不浮动（默认值） left 元素向左浮动 ri..
CSS浮动/常见网页布局/清除浮动/学成在线案例
cheng_09的博客
10-23 784
CSS 04 1. 浮动（float） 1.1 传统网页布局的三种方式 网页布局的本质——用 CSS 来摆放盒子。 把盒子摆放到相应位置. CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)： 普通流（标准流） 浮动 定位 注意：实际开发中，一个页面基本都包含了这三种布局方式 1.2 标准流（普通流/文档流） 所谓的标准流: 就是标签按照规定好默认方式排列. 块级元素会独占一行，从上向下顺序排列。 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
中软Day04——CSS基础（盒子模型、浮动、定位）
qq_43542290的博客
11-20 683
中软Day04 盒子模型（css重点） 盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。 css三个大模块：盒子模型，浮动，定位 网页布局的本质 网页布局中，我们是如何把里面的文字，图片，按照美工给我们的效果图排列的整齐有序呢？ 牛奶是怎样运输，让消费者...
盒模型，BFC布局，清除浮动，定位position，元素居中汇总
Leslie_Cheung56的博客
09-08 228
一、盒模型 1、概念： 在我们所熟悉的HTML页面中，每一个页面元素都可以看做一个盒子，由内容（content）、外边界区（margin）、填充区（padding）四部分组成。 2、盒模型分为两种： 标准盒模型：其总宽度 = width + margin + padding + border 怪异盒模型：总宽度 = width + margin （width已经包含了border和padding值）（IE浏览器中） 3、两种盒模型之间的互相转换 box-sizing:content-bo.
实战CSS：静态百度首页实现
KaiSarH
12-16 797
目标 : 将百度首界面静态实现,实现以下效果. 效果: 代码: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度一下, 你就知道</title> <link rel="shortcut i...
浮动布局（float）
m0_55825350的博客
03-16 149
float:left|right|none; 模块横向排列，可解决布局元素横排的问题，同时在网页缩放过程中保留原有的布局结构。 影响： 1、元素一旦浮动会脱离文档流（不占位、漂浮）。 2、浮动的元素会覆盖正常没有浮动的元素。 3、可能子元素的浮动会导致父元素高度塌陷。 4、元素浮动后文字会对其产生环绕效果。 清除浮动： 1、增加挡板元素 .clearFix{ clear:left|right|both; zoom:1; } <div class="clearFix"></...
浮动布局【CSS】
wuxian_wj的博客
12-22 1313
1. 什么是浮动 浮动方式布局就是使用 float 属性，使元素脱离文档流，浮动起来。 浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。 1.1 特征 1.1.1 脱离文档流 脱离文档，也就是说浮动不会影响普通元素的布局。即其他div不会被设置浮动的div浮动位置影响，但是文字仍会为被浮动div让位。因为设置浮动的div只脱离了文档流并未脱离文本流。 从上图可以看出，默认三个设置了宽高的block元素，本来会格子独占一行；如果框1设置了向左/向右浮动，他会忽略框2和框3，直到碰到父元
CSS浮动布局
Y_ooo的博客
01-21 4498
CSS浮动布局 float属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。 float: left | right | none 1.文档流 指元素在排版布局的过程中，元素会自动从左到右，从上到下的流式排列。添加浮动会脱离文档流，对后续元素产生影响。 （1）空间丢失 第一个div设置浮动，第二个未设置。第一个会脱离文档流，第二个div向前填充。 div { width: 200px;
Float浮动布局
Awui
09-04 3629
什么是浮动布局？ 浮动可以设置元素，脱离正常的文档流，向右或者向左，靠近父元素的边缘或者是设置了浮动的其他的元素的边缘靠拢。比如， 我们使用div等块标签的时候，它们都是独占一行，但是很多时候要将多个div并排放置，这种情况就可以使用浮动布局。 浮动可以那些问题？ 可以解决文字包围图片的问题： 下面是没有使用浮动布局的时候，右边的一大块空白的浪费的，这样就可以使用float：left,使页面呈现杂志样式（文字环绕） <style> img {
理解和解决CSS布局问题：清除浮动与margin塌陷
清除浮动主要是为了防止浮动元素对页面其他元素的布局造成影响，而margin塌陷则会导致元素间的间距计算错误。文章提供了多种清除浮动的策略，包括额外标签法、伪元素法和触发BFC等，并对每种方法的优缺点进行了分析...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值