float实现前端界面的五种布局

最新推荐文章于 2023-08-30 16:07:08 发布
最新推荐文章于 2023-08-30 16:07:08 发布
阅读量294 收藏 1
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43295106/article/details/107280008
版权

• 实现一个两栏布局，左侧占30%宽度，右侧占70%宽度

<!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 >
        .w{
            width: 100%;
            overflow: hidden;
        }
        .w1{
            width: 30%;
            float: left;
            padding: 50px 0;
            background-color: hotpink;
        }
        .w2{
            width: 70%;
            float: right;
            padding: 50px 0;
            background-color: indianred;
        }

    </style>
</head>
<body>
    <div class="w">
        <div class="w1">

        </div>
        <div class="w2">

        </div>
    </div>
    
</body>
</html>

显示效果如图：
在这里插入图片描述

• 实现一个两栏布局，左侧固定宽度，右侧根据浏览器宽度进行自适应变化

<!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;
            border-style: none;
        }
        .w{
            width: 100%;
            overflow: hidden;
        }
        .w1{
            width: 200px;
            float: left;
            padding: 50px 0;
            background-color: hotpink;
        }
        .w2{
            width: 100%;
            padding: 50px 0;
            background-color: indianred;
        }

    </style>
</head>
<body>
    <div class="w">
        <div class="w1">

        </div>
        <div class="w2">

        </div>
    </div>
    
</body>
</html>

显示图片如下：
在这里插入图片描述

• 实现一个两栏布局，右侧固定宽度，左侧根据浏览器宽度进行自适应变化

<!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;
            border-style: none;
        }
        .w{
            width: 100%;
            overflow: hidden;
        }
        .w1{
            width: 100%;
            padding: 50px 0;
            background-color: indianred;
        }
        .w2{
            
            width: 200px;
            float: right;
            padding: 50px 0;
            background-color: hotpink;
        }

    </style>
</head>
<body>
    <div class="w">
        <div class="w2">

        </div>
        <div class="w1">

        </div>
       
    </div>
    
</body>
</html>

在这里插入图片描述

• 实现一个三栏布局，左侧固定宽度，右侧固定宽度，中间部分宽度随浏览器宽度变化而自适应变化

<!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;
            border-style: none;
        }
        .w{
            width: 100%;
            overflow: hidden;
        }
        .w1{
            width: calc(100%-200px);
            padding: 50px 0;
            background-color: indianred;
        }
        .w2{
            
            width: 200px ;
            float: right;
            padding: 50px 0;
            background-color: hotpink;
        }
        .w3{
            width: 200px;
            float: left;
            padding: 50px 0;
            background-color: indigo;
        }

    </style>
</head>
<body>
    <div class="w">
        <div class="w3">

        </div>
        <div class="w2">

        </div>
        <div class="w1">

        </div>
        
       
    </div>
    
</body>
</html>

显示效果如下：
在这里插入图片描述

• 实现一个三栏布局，左侧固定宽度，中间固定宽度，右侧根据浏览器宽度变化而自适应变化

<!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;
            border-style: none;
        }
        .w{
            width: 100%;
            overflow: hidden;
        }
        .w1{
            width: calc(100%-400px);
            padding: 50px 0;
            background-color: indianred;
        }
        .w2{
            
            width: 200px ;
            float: left;
            padding: 50px 0;
            background-color: hotpink;
        }
        .w3{
            width: 200px;
            float: left;
            padding: 50px 0;
            background-color: indigo;
        }

    </style>
</head>
<body>
    <div class="w">
        <div class="w3">

        </div>
        <div class="w2">

        </div>
        <div class="w1">

        </div>
        
       
    </div>
    
</body>
</html>

显示效果如下：
在这里插入图片描述

kidrue
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS浮动文摘
08-02 478
很早以前就接触过CSS，但对于浮动始终非常迷惑，可能是自身理解能力差，也可能是没能遇到一篇通俗的教程。 写在前面的话： 由于CSS内容比较多，没有精力从头到尾讲一遍，只能有针对性的讲解。 如果读者理解CSS盒子模型，但对于浮动不理解，那么这篇文章可以帮助你。 本文以div元素布局为例。 教程开始： ...
前端基础(十一)_Float浮动、清除浮动的几种方法
见贤思齐焉，见不贤内自省
12-16 1258
Float浮动、清除浮动的几种方法
前端基础：CSS 浮动(float)-普通流、浮动、定位、布局的综合搭配（重点）
weixin_49555741的博客
03-10 674
关于三种网页的布局：普通流、浮动、定位的学习，重点介绍了浮动和普通流搭配浮动的布局，标准流的两个注意点，并且完成一个小米手机布局的网页练习。
Web前端开发笔记21——float浮动
DRLDER的博客
04-19 1145
1.传统网页布局的三种方式： 普通流（标准流） 浮动 定位 2.标准流：就是标签按照规定好默认方式排列。 3.多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。 4.float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。 5.浮动特性： 脱离标准普通流的控制（浮）移动到指定位置（动），（俗称脱标） 浮动的盒子不再保留原先的位置。 浮动具有行内块元素的特点。如果给行内元素或是其他类型元素添加浮动，那么就会让此元素具有行内块元素相似的
五种前端布局之float布局
qq_39877681的博客
11-18 8281
float布局 float 属性定义元素往哪个方向浮动。 float布局特性 图文环绕效果 float元素脱离了文档流，但是不脱离文本流 文字环绕效果是很明显的，这里要注意一个地方:浮动的块虽然脱离的正常的文档流，但是还会占有正常文档流的文本空间，上图中，p的区域其实是顶到了img的底下的，因为float让img脱离文档流，但是p上的文字却没有顶过去，也就是说p上的一部分文字空间仍然被img占据着，所以从这里也可以看出float的脱离文档流不是完全脱离。 对自身的影响：形成“块”（BFC–块格式化
web前端开发常用布局demo
09-20
在Web前端开发中，布局是构建用户界面的关键部分，它决定了网页元素的排列方式和空间分布。本资源“web前端开发常用布局demo”提供了一系列常用的布局模式，供开发者在实际项目中参考和应用。以下是对这些布局技术的...
电商前端界面
07-16
例如，使用`background-color`设置背景色，`font-family`定义字体，`padding`和`margin`调整元素间距，`float`或`display`实现布局。CSS3引入了更多高级特性，如阴影、渐变、过渡、动画等，极大地增强了电商网站的...
前端-移动端布局-案例
03-20
- Float布局：虽然在现代布局中已较少使用，但浮动布局仍然是早期移动端布局的常见方法。 - Position布局：通过position属性，可以控制元素的绝对定位或相对定位，但在响应式设计中通常用于微调。 3. 实际应用...
HTML/CSS中的float定位在iOS上的实现
02-25
几乎所有会WEB前端开发的同学都知道CSS中有一个float属性用于实现HTML元素...iOS中实现不规则排列的方式在iOS中我们可以通过frame以及AutoLayout两种方法来实现界面的布局。如果是通过frame方式在一些不规则界面的场景
CSS3 flex布局之快速实现BorderLayout布局
12-13
学习完flex的布局模式之后,我们趁热打铁,来实现一个BoxLayout布局.什么是BoxLayout布局?那我们先上一个图看看 BoxLayout布局写过后端UI代码的编程者应该不陌生了,写前端的代码的也同样很熟悉,包括html的框架frame....
前端系列之CSS（float浮动）
十二指环的博客
01-19 1583
float属性介绍float中的四个参数： -float: left -float:right -float:none -float:inherit //继承浮动我们可以使用float属性实现文本环绕效果实例应用<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>float</title>
三栏自适应布局的7种实现方式
最新发布
m0_55734628的博客
08-30 650
三栏布局其中包含左中右三栏，左边列和右边列的宽度都是固定的，中间列的宽度是自适应的。
前端三大布局,float,flex,grid的介绍
efew212efe的博客
04-27 1596
什么是布局 在说三大布局之前我们先聊聊什么是布局：布局就是把页面分成一块一块，按左中右、上中下等排列 现在的布局分类有两种： 固定宽度布局，一般宽度为960/1000/1024px 不固定宽度布局，主要靠文档流的原理来布局 还有一种就是响应式布局，这种布局要考虑到手机端的布局，在pc端固定，在手机端不固定 布局的思路： 由大到小，先定下大局再完善小部分，一般老手使用这种办法 由小到大，先完成小部分，再组合成大布局，新手推荐 前端戒律： 在布局的时候千万不要将界面写死，永远不要把width和he
CSS浮动（float）
Continue的博客
03-07 227
浮动（float） 网页布局的本质：用CSS来摆放盒子，把盒子摆放到相应位置 本篇将介绍浮动，了解在CSS布局中为什么需要浮动，浮动又是什么，怎样使用，它有什么特性，以及清除浮动。 传统网页布局的三种方式： 普通流（标准流） 浮动 定位 为什么需要浮动？ 有很多布局效果，标准流没有办法完成，此时就可以利用浮动完成布局，因此浮动可以改变元素标签默认的排列方式。 浮动最典型的应用：可以让多个块元素一行内排列显示。 网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。 步入正题.
浮动元素排列规则
space_walk的博客
10-11 2240
浮动元素排列规则
float布局
yulingpan123的博客
08-26 730
float布局，实践
CSS页面布局（超详解）
热门推荐
m0_52896041的博客
12-02 2万+
浮动的框可以向左或向右移动，直到其外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档普通流中，所以文档普通流中的块元素表现得就像浮动框不存在一样。HTML文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用的空间，这个模型称为盒子模型。
HTML+CSS | 网页二、三栏布局(圣杯/双飞翼布局) + 水平垂直居中
qq_33290233的博客
03-26 1608
分别尝试使用Float、Position或者Flexbox来实现如下需求： 实现一个两栏布局，左侧占30%宽度，右侧占70%宽度 实现一个两栏布局，左侧固定宽度，右侧根据浏览器宽度进行自适应变化 实现一个两栏布局，右侧固定宽度，左侧根据浏览器宽度进行自适应变化 实现一个三栏布局，左侧固定宽度，右侧固定宽度，中间部分宽度随浏览器宽度变化而自适应变化 实现一个三栏布局，左侧固定宽度，中间固定宽度，右...
HTML/CSS -- 利用float进行页面布局
wust_cyl的博客
12-23 514
布局1： 高度已知，左边固定，右边自适应 当我们缩小浏览器窗口时，黄色自动缩小 &lt;section&gt; &lt;article&gt; &lt;style&gt; .part2-content-wrap div { height: 300px; ...
前端实现双飞翼布局
05-25
双飞翼布局是一种常见的三栏布局，它可以让中间内容自适应宽度，左右两侧宽度固定并且可以放置固定宽度的元素。下面是一个基于 CSS 的双飞翼布局示例： HTML 结构： ``` 左侧内容 右侧内容 中间内容 ``` CSS ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值