CSS Float(浮动)

最新推荐文章于 2022-11-26 11:07:29 发布

1只猪

最新推荐文章于 2022-11-26 11:07:29 发布

阅读量126

点赞数

分类专栏： css 文章标签： css css3

本文链接：https://blog.csdn.net/Apig_/article/details/107965769

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.基本的浮动布局

	浮动布局可以让块级元素自左向右（或自右向左）的排列在同一行
	行内元素浮动之后可以设置宽高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Float</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        li{
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            float: left;
        }
    </style>
</head>
<body>
    <ul>
        <li style="background-color: blue;">1</li>
        <li style="background-color: red;">2</li>
        <li style="background-color: yellow;">3</li>
        <li style="background-color: pink;">4</li>
    </ul>
</body>
</html>

在这里插入图片描述
2.浮动对父元素的影响

	浮动元素无法撑开父级元素高度，导致父元素背景不能显示，边框不能撑开。需要在父元素中设置overflow: hidden

3.浮动对兄弟元素的影响

	浮动元素与行内元素：优先布局浮动元素，行内元素会被挤压

4.清除浮动

	设置清浮动的样式

	::after{
		display: block;
	    clear: both;
	    content: "";
    }

5.浮动布局的一些特殊情况

	1.浮动布局如果第一行放不下，就会从第二行接着放，但是如果每个元素的高度不一致，会如何放置？

	结论1：第二行的垂直位置由第一行最后一个元素的高度决定
	结论2：如果第一行最后一个元素它前面的元素高度大于它，则第二行只能放一个元素了

1只猪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS Float(浮动)

1.基本的浮动布局浮动布局可以让块级元素自左向右（或自右向左）的排列在同一行行内元素浮动之后可以设置宽高<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Float<
复制链接

扫一扫