CSS学习笔记之浮动 2.26

最新推荐文章于 2024-09-20 16:09:38 发布
最新推荐文章于 2024-09-20 16:09:38 发布
阅读量203 收藏 1
点赞数 1
文章标签： css 学习 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36450483/article/details/123151028
版权

1.1 常见的网络布局

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .top{
            height: 60px;
            background-color: gray;
        }
        .banner{
            width: 800px;
            height: 150px;
            background-color: skyblue;
            margin:10px auto;


        }
        .box{
            width: 830px;
            height: 300px;
            background-color: yellow;
            margin: 20px auto;
        }
        li{
            list-style: none;

        }
        .box li{
            width: 200px;
            height: 300px;
            background-color: #ccc;
            margin-right:10px; ;
            float: left;
        }
        .box .last{
            margin-right: 0;
        }
        .footer{
            height: 200px;
            background-color: #abc;
        }

    </style>
</head>

<body>
    <div class="top">1</div>
    <div class="banner">2</div>
    <div class="box">
        <ul>
            <li>g</li>
            <li>g</li>
            <li>g</li>
            <li class="last">g</li>
        </ul>
    </div>
    <div class="footer">4</div>
</body>

</html>

 

1.2 浮动布局注意

1、浮动和标准流的父盒子搭配

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置

2、一个元素浮动了，理论上其余的兄弟元素也要浮动。

一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应用浮动，以防止引起问题

浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

 

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
    
        .box {
            width: 900px;
            height: 300px;
            background-color: pink;
            margin: 0 auto;
        }

        .one {
            float: left;
            width: 200px;
            height: 200px;
            background-color: purple;
        }

        .two {
            float: left;
            width: 200px;
            height: 150px;
            background-color: red;
        }

        .three {
            float: left;
            width: 300px;
            height: 240px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="three">3</div>
    </div>
</body>

</html>

1.3 为什么需要清除浮动

1、由于浮动元素不再占用原文档流的位置，所以他会对后面的元素排版产生影响

 

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .one {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .two {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="one">1</div>
        <div class="two">2</div>
    </div>
    <div class="footer"></div>

</body>

</html>

1.4 清除浮动本质

1、如果父盒子本身有高度，则不需要清除浮动

2、清除浮动以后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

语法：

选择器{clear：属性值；}

属性值：left、right、both

清除浮动方法：额外标签法、父级添加overflow属性、父级添加after伪元素、父级添加双伪元素

额外标签法：在浮动元素末尾添加空的标签。

 优点： 通俗易懂，书写方便

 缺点： 添加许多无意义的标签，结构化较差

注意： 要求这个新的空标签必须是块级元素。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .one {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .two {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }

        .clear {
            clear: both;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="one">1</div>
        <div class="two">2</div>
        <div class="two">3</div>
        <div class="two">4</div>
        <div class="two">5</div>
        <!-- <div class="clear"></div> -->
        <!-- 这个新增的盒子要求必须是块级元素不能是行内元素 -->
        <div class="clear"></div>
    </div>
    <div class="footer"></div>

</body>

</html>

父级添加overflow属性：给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll 。

 优点：代码简洁

 缺点：无法显示溢出的部分

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        .box {
            /* 清除浮动 */
            overflow: hidden;
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>

</body>

</html>

after 伪元素法：父元素添加

.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* IE6、 7 专有 */
*zoom: 1;
}

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .clearfix {
            /* IE6、7 专有 */
            *zoom: 1;
        }

        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box clearfix">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>

</body>

</html>

 优点：没有增加标签，结构更简单

 缺点：照顾低版本浏览器

双伪元素清除浮动：父元素添加

.clearfix:before,.clearfix:after {
content:"";
display:table;
} .
clearfix:after {
clear:both;
} .
clearfix {
*zoom:1;
}

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style>
        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box clearfix">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>

</body>

</html>

 优点：代码更简洁

 缺点：照顾低版本浏览器

 

Terry-98
关注
CSS--学习笔记
qq_45269750的博客
04-04 175
初识CSS 1、了解什么是网页样式 2、掌握CSS的基本语法 3、熟练掌握CSS的基本属性 4、会使用DIV + CSS进行网页布局 5、熟练使用CSS来装饰页面 块元素和内联元素 块元素 独占一行 可以定义宽度和高度 常用块元素 div p ul li 内联元素 一行排列显示 不能定义宽度和高度 常用内联元素 span a label 和标...
HTML+CSS学习笔记.zip
01-01
HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 ...
css水波纹效果
Haines
07-18 221
html: <div id="ball"></div> css: body { margin: auto; min-height: 100vh; background-image: linear-gradient(rgb(90,90,200),rgb(3,3,110)); } #ball { position: absolute; width: 200px; height: 200px; border-radiu
6款漂亮HTML CSS样式用户留言表单
热门推荐
Nemo的笔记本
04-11 7万+
如今我们的网站、页面更加需要注重细节，不论是字体的样式、还是图片的分辨率清晰度都会影响到用户的访问体验和PV，以及用户以后是否会回访我们的网站/博客。如果有时间的时候，老左也会浏览和阅读相关的前端网站和积累一些不错的前端资源，在"8款设计师常用漂亮的HTML CSS表格样式"中展示了几款不错的价格列表，在这篇文章中整理6个用户留言HTML CSS样式。标记首先我们要在网页中加上常用的几个标签文本，......
2020-10-25 CSS（四）浮动
ttxwwdn的博客
10-26 174
学习目标： CSS 浮动 学习内容： 1 浮动（float） 1.1 传统网页布局的三种方式 网易布局的本质——用CSS来摆放盒子 CSS提供了三种传统的布局方式： 普通流（标准流） 浮动 定位 实际开发中，一个页面基本都包含了这三种布局方式。 1.2 标准流（普通流/文档流） 标签按照规定好的默认方式排列 块级元素独占一行，从上到下排列 行内元素会按照顺序，从左到右排列，碰到父级元素自动换行 ...
浮动详解
weixin_44928160的博客
04-25 397
浮动定义 浮动属性用于创建浮动框，将其移到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。 浮动特性 浮动元素会脱离文档流 脱离文档流的控制（浮）移动到指定位置（动），俗称脱标，浮动的盒子不再保留原先的位置 浮动的元素会在一行显示并且元素顶部对齐 浮动的元素会具有行内块元素的特性 如果行内元素有了浮动，则不需要转换为块级/行内块元素就可以直接给宽度和高度；如果块级盒子没有设置宽度，默认宽...
CSS浮动 Day13
weixin_59339928的博客
11-17 197
1.浮动 传统网页布局的三种方式：普通流（标准流） 浮动 定位 网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。 float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。 浮动的特性： 1、浮动的元素会脱离标准流 相当于飘到了空中 在标准流中就不占位置 2、浮动的元素比标准流高出半个级别 可以覆盖标准流中的元素 3、浮动找浮动 下一个浮动元素会在上一个浮动元素后面左右浮动 4、浮动会受到上面元...
HeadFirst HTML&CSS学习笔记.zip
12-29
CSS学习笔记 HeadFirst HTML&CSS学习笔记HeadFirst HTML&CSS学习笔记 HeadFirst HTML&CSS学习笔记HeadFirst HTML&CSS学习笔记 HeadFirst HTML&CSS学习笔记HeadFirst HTML&CSS学习笔记 Head...
Head First HTML&CSS 学习笔记.zip
12-29
CSS 学习笔记 Head First HTML&CSS 学习笔记Head First HTML&CSS 学习笔记 Head First HTML&CSS 学习笔记Head First HTML&CSS 学习笔记 Head First HTML&CSS 学习笔记Head First HTML&CSS ...
前端三件套css学习笔记分享
02-24
前端三件套css学习笔记分享
html+css前端学习笔记.zip
01-01
html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习笔记html+css前端学习笔记html+css前端学习笔记 html+css前端学习...
浮动布局--清除浮动
DVchengxuyuan的博客
10-13 224
什么是浮动？ float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。 语法： 选择器 { float: 属性值; } 浮动特性 加了浮动之后的元素,会具有很多特性,需要我们掌握的. 1、浮动元素会脱离标准流(脱标：浮动的盒子不再保留原先的位置) 2、浮动的元素会一行内显示并且元素顶部对齐 注意： 浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。 3、浮动的元素会具有行..
CSS的offset属性
读心悦
09-15 628
如果你确实需要在CSS中根据元素的偏移量来应用样式，并且这个偏移量是动态的（比如，基于JavaScript计算得出的），你可能需要使用JavaScript来动态地修改元素的类名或内联样式，以反映这些变化。: 虽然这些属性不是直接用于定位元素的，但它们可以影响元素与其他元素之间的空间，从而间接影响布局和元素的“偏移”效果。属性本身不是直接用于“偏移”的，但它可以用来移动元素，包括旋转、缩放、倾斜等。可以实现元素的水平或垂直移动，而不需要改变文档流中的实际位置。，这些属性用于获取元素的位置和尺寸信息。
CSS——网格布局（display: grid）之上篇
懒羊羊大王的博客
09-16 1669
CSS网格布局（CSS Grid Layout）是一种用于创建复杂网页布局的系统，它允许开发者以二维系统（行和列）来控制元素的布局。跟 Flexbox 类似，网格布局也是作用于两级的 DOM 结构。设置为 display: grid 的元素成为一个网格容器（grid container）。它的子元素则变成网格元素（grid items）。下面将详细介绍网格布局：
CSS-Grid布局详解
2303_76218115的博客
09-19 1112
Grid 栅格布局 是 CSS 语言中非常强大的种布局，它提供了丰富的工具属性，可以轻松实现复杂且灵活的布局设计，因此想要完美使用CSS Grid 也有一定的难度和复杂性，我自己也是花了不少时间才真正掌握它的使用，在这篇教程中，我会分享在学习和使用 CSS Grid 时的一些关键体会和收获，通过这些希望能够帮助各位了解到 CSS Grid 的基础知识，并学会如何用它实现一些复杂的布局效果。兼容性怎么样？
使用HTML和CSS制作网页的全面指南
weidl001的博客
09-14 1510
HTML（超文本标记语言）是构建网页的基础语言。它用于定义网页的结构和内容。通过使用不同的标签（tags），我们可以告诉浏览器如何显示文本、图像、链接等。CSS（层叠样式表）用于控制网页的外观和布局。它可以设置文本的颜色、字体、背景、边距等，使网页更加美观和用户友好。通过以上步骤，我们已经了解了如何使用HTML和CSS创建一个简单但完整的网页。主题要点HTML基础了解HTML的结构和常用标签CSS基础理解CSS的语法、选择器和常用属性网页制作步骤规划布局 -> 编写HTML -> 添加CSS实践技巧。
HTML 和 CSS
2301_79685859的博客
09-16 1274
HTML（HyperText Markup Language）是用于定义网页内容的标记语言。它通过一系列标签将内容结构化，使浏览器能够理解并渲染网页。常见的 HTML 元素包括标题、段落、图片、链接等。CSS（Cascading Style Sheets）是用于控制网页外观的样式表语言。通过 CSS，开发者可以定义网页元素的颜色、字体、布局、大小等外观属性。CSS 可以嵌入到 HTML 文件中，也可以通过外部文件进行引入。
table表格，让thead固定，tbody内容滚动，关键是都对齐的纯css写法
最新发布
宝码香车的博客
09-20 1377
附具体完整代码，深入理解，彻底掌握！可以一键复制，查看效果。
CSS学习笔记：WEB开发中的样式精华
"很好的css学习笔记，pdf格式（64页），包含了CSS+DIV的学习内容，适合初学者逐步了解和掌握CSS技术。" 这篇CSS学习笔记详细介绍了CSS的基础知识，包括其起源、作用以及如何改善HTML页面的设计。CSS，即层叠样式表...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值