深入解析css-浮动-学习小结

时间：2024-12-10 17:48:24

浮动设计初衷

类似报纸的布局栏，浮动是为了让图片嵌在文本流中，文本不会覆盖图片，但早期布局只有浮动，因此将浮动用于布局，后来才有了display:inline-block display: table flexbox和网格布局等

基本代码

<html>
    <head>
        <style>
            :root {
                box-sizing: border-box;}
            *,
            ::before,
            :;after {
                box-sizing: inherit;}
            body {
                background-color: #eee;
                font-family: Helvetica, Arial, sans-serif;}
            body * + * {
                margin-top: 1.5em;}
            header {
                padding: 1em 1.5em;
                color: #fff;
                background-color: #0072b0;
                border-radius: .5em;
                margin-bottom: 1.5em;}
            .main {
                padding: 0 1.5em;
                background-color: #fff;
                border-radius: .5em;}
        </style>
    </head>
    <body>
        <div class="container">
            <header>
                <h1>TJH Special Club</h1>
            </header>
            <main class="main clearfix">
                <h2>Running Tips</h2>
                <div>
                    <div class="media">
                        <img class="media-image" src="runner.png">
                        <div class="media-body">
                            <h4>Strength</h4>
                            <p>Strength train is important</p>
                        </div>
                    </div>
                    <div class="media">
                        <img class="media-image" src="shoes.png">
                        <div class="media-body">
                            <h4>Cadence</h4>
                            <p>cadence</p>
                        </div>
                    </div>
                    <div class="media">
                        <img class="media-image" src="shoes.png">
                        <div class="media-body">
                            <h4>Transform it</h4>
                            <p>I like running</p>
                        </div>
                    </div>
                    <div class="media">
                        <img class="media-image" src="runner.png">
                        <div class="media-body">
                            <h4>concentrate mind</h4>
                            <p>focus your mind</p>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </body>
</html>

双容器模式

将内容放入两个嵌套的容器总，通过设置内容器的外边距，让内容器左右居中

body是外层容器 container是内层容器，对内层容器按双容器模式设置样式。发现内容器宽度达到最大宽度，然后左右居中

.container {
                max-width: 1080px;
                margin: 0 auto;}

是否有必要学习浮动

有 贴近老代码，且让图片被文本环绕，浮动是少数能实现的方案

容器折叠和清除浮动

容器折叠

将四个media浮动到容器左侧。发现四个media好像跑到了容器外边，是因为浮动元素的高度不会加给父元素上，不过这恰恰符合浮动的初衷：浮动是为了让图片被文本环绕，所以图片高度不会加给父元素

.media {
                float: left;
                width: 50%;
                padding: 1.5em;
                background-color: #eee;
                border-radius: .5em;}

这并不是我们想要的，我们想要四个媒体元素都被包含在容器元素中

方法1

使用clear属性。需要将一个元素放到容器元素内的末尾元素，这会让容器元素扩展到该元素的下方

通俗理解，一个浮动图片会被文字环绕，如果清除浮动，则该图片自成一行，不再被文字环绕

理解清除浮动

可以用伪元素取代额外增加的div元素，清除浮动可以叫clearfix

伪元素是一种特殊的选择器，以双冒号::开头，最常用的伪元素是::before ::after

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

浮动元素外边距在容器内不会被折叠，而容器内非浮动元素外边距会被折叠（runnering tips紧贴最上边）

通过对容器内第一个和最后一个元素设置属性避免外边距折叠

.clearfix::before,
            .clearfix::after {
                display: table;
                content: " ";}

clear清除浮动只对块元素有效，所以可以用display: table但不能display:table-cell

浮动陷阱

上一个页面的浮动比较奇怪，是因为跑步图片比较高，导致第一个media盒子高一些。为什么第三个盒子不在第一个盒子下面，因为有浮动。如果清除第三个元素之前的元素浮动，则第三个元素可以从新行开始，而不是跑到第二个元素下方

.media:nth-child(odd) {
                clear: left;
            }

nth-child伪类选择器可以选取第奇数个元素。如果每行三个元素，则nth-child(3n+1)

这种布局方式局限性是需要知道每行有几个元素，然后根据每行元素数量设置清除浮动

因为有猫头鹰选择器，还需要考虑第一个媒体元素外边距

相关文章