33、CSS进阶——布局

布局

1. 多栏布局

1.1 两栏布局

• 创建主区域，在主区域中添加两个块盒div和aside，aside用作侧边栏，div用作主内容；
• aside定宽，设为浮动；
• 解决高度坍塌；
• div构建BFC，使div区域避开aside区域；（这里能够实现缩放页面时，div宽度自适应，且能够设置div和aside之间的距离）
• 设置浮动盒的margin，使两栏有一定的间隔。

<div class="container clearfix">
    <aside class="aside">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium esse culpa id, provident velit at, odio fugiat atque repudiandae nemo repellendus cum nisi nobis error impedit. Id minus obcaecati voluptatibus, ipsa autem maxime! Enim ipsam soluta dolorem eum rerum, modi commodi itaque iusto explicabo, harum asperiores eos officia optio porro, vel at atque fuga aspernatur ratione quod corrupti necessitatibus distinctio? Quibusdam, minus unde nisi vero quae magnam quod velit consequuntur? Eos obcaecati rerum quasi porro nobis nulla temporibus incidunt doloremque accusantium officia? Laudantium dicta pariatur ad amet dolor quidem fugit molestiae saepe a iusto labore, maiores harum ex at! Ullam corrupti facere iusto blanditiis ea molestias et vero nemo! Sapiente tempora quis illum quibusdam asperiores obcaecati, repudiandae corrupti animi, ut impedit amet at voluptas sed natus suscipit nulla praesentium, soluta sit nihil! Fugiat dolorum illo velit laboriosam maiores quam, autem molestiae dolore obcaecati saepe nostrum at porro voluptatum fugit minus blanditiis, sint harum iusto molestias impedit! Quo, harum. Voluptate sed delectus enim laborum ratione et, saepe accusamus adipisci! Nemo ipsa maiores non sapiente! Quaerat fugiat minima eum iste nulla, eligendi quas illo suscipit explicabo blanditiis harum consequatur, eveniet, corporis possimus corrupti perspiciatis deserunt nobis! A omnis laborum atque maxime non delectus ex ipsum, sapiente beatae itaque corporis! Explicabo non cumque aliquam ullam voluptate id sint dolore esse itaque, maiores voluptas minus quod libero voluptatem officia, sit rerum nesciunt voluptatibus architecto illum minima. Officia unde quam neque aperiam nesciunt, a excepturi beatae! Nulla aut quos velit maiores beatae nam quo ut, officiis molestias atque soluta consequatur tempora quam cumque similique eligendi dolor. Consectetur impedit enim nobis nemo quia. Quam, saepe delectus doloribus necessitatibus odit veniam sequi harum unde suscipit voluptate, atque quos, nostrum voluptatibus qui architecto. Est corrupti, quia odit voluptate numquam optio corporis omnis beatae libero magni officia animi voluptatem. Tempora libero possimus, ipsum odit culpa exercitationem porro eligendi perferendis fuga magnam doloribus debitis rerum ipsa, doloremque accusantium fugiat inventore reprehenderit repellat fugit quod nemo! Incidunt inventore quam possimus itaque ipsam sed praesentium! Rem quasi, nisi dignissimos harum optio rerum officia aperiam, aut ipsa unde ut alias doloremque consequatur nihil? Autem recusandae eius repellat quis voluptatem voluptatum reprehenderit doloremque laboriosam dolores, illo, id debitis neque nemo veritatis ratione dolorem repudiandae libero veniam? Enim officiis, amet pariatur quaerat modi exercitationem quis aut eius vero iure est quidem odit, assumenda inventore minus quam ipsum aperiam eligendi consequatur! Sapiente soluta ratione neque unde iure aspernatur exercitationem quo non rerum laboriosam deserunt voluptates et ullam voluptatem, vitae, quos recusandae amet vel, est laudantium voluptatibus odio quam. Quasi laborum veniam accusamus aliquid placeat a, nihil inventore! Molestias dolores esse quisquam, adipisci dolorem voluptas deleniti ipsum aspernatur debitis reiciendis nisi earum ipsa voluptate sit ipsam omnis. Harum, ad id quaerat ea consequatur praesentium, ab mollitia unde commodi modi aliquid autem. Atque ullam culpa, odit ut eveniet at dolore dolores nam optio modi natus eaque! Ducimus nobis explicabo aperiam soluta repellat doloremque esse, nulla sequi sit inventore recusandae eaque quis totam amet libero? In eum vel eius.
    </aside>
    <div class="main">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque dolorum placeat ipsam hic recusandae quibusdam quae, voluptates, mollitia tempore perspiciatis consequatur tenetur, voluptatem praesentium nostrum assumenda enim eos nulla saepe earum corrupti. Mollitia impedit sed beatae veniam nihil dicta cum aut, corporis, accusamus nesciunt iure hic ab, dolores consequuntur quia obcaecati officiis eum. Voluptatibus quod eius exercitationem natus magni consequatur quidem, ab voluptatum vitae error facere? Optio modi quibusdam obcaecati illo eius! Rem necessitatibus maxime aperiam quidem assumenda ratione aut laboriosam illum eligendi sunt fugit a fugiat odit dicta harum hic, aspernatur cumque tempora reprehenderit distinctio deserunt? Quidem voluptas rerum, optio nam perferendis laudantium in voluptatem error molestiae unde dicta beatae obcaecati animi debitis doloribus assumenda, neque placeat aperiam nobis dolor aut iste. Consectetur sequi laborum excepturi modi tempora unde facere sint voluptas sit eaque, dignissimos, odio corporis explicabo quasi reprehenderit corrupti debitis repellendus pariatur autem! Sequi consequuntur deserunt dolores delectus voluptatibus, natus ratione iusto cupiditate dignissimos dolor praesentium ab aperiam odio ut aliquam similique ea ducimus adipisci quod error facere fugit itaque. Temporibus animi at nisi neque doloremque libero corporis odio sunt. Eius, ipsam consectetur soluta assumenda porro alias tempora aliquid nulla! Dicta repudiandae assumenda est! Consequuntur quaerat quos debitis voluptatem harum, dolore optio pariatur quidem est quod, beatae distinctio quis? Libero aliquam voluptatem aperiam explicabo aut quas beatae incidunt pariatur obcaecati, praesentium est dolore maiores quia sunt nihil recusandae fugit quos expedita cum eius dicta minus suscipit itaque. Aliquam id mollitia architecto harum animi quo, expedita esse accusantium, eum delectus dignissimos molestiae aliquid consequatur non quis, magnam reiciendis sint doloribus laborum vel. Aliquam, tenetur quasi? Distinctio sapiente alias rem maxime eius, quibusdam dignissimos debitis quidem tempora earum aliquid et molestias obcaecati corporis id reiciendis odio necessitatibus aspernatur facilis. Amet rerum architecto cum? Quisquam dolorem illum unde hic molestiae voluptatibus error, sequi sapiente, mollitia nulla similique autem qui quia at alias. Eos, porro dolor unde consectetur dolores minima optio, ipsa, a id enim quas exercitationem repellat assumenda libero cum aut cumque incidunt? Asperiores fuga perferendis ullam quidem reiciendis ducimus illum maiores hic officia, quae sunt voluptas omnis est quod fugiat deleniti blanditiis sapiente vel, temporibus consectetur pariatur nihil maxime obcaecati odit. Similique fugiat esse eveniet impedit ullam ipsam quasi voluptatem quo ad eos distinctio molestias atque ducimus possimus natus, pariatur culpa hic recusandae mollitia accusamus provident reprehenderit labore ex libero? Provident eligendi tempora repellat rerum iste repudiandae voluptates repellendus voluptas velit, ab porro ea inventore. Unde, distinctio. Consequatur, perferendis molestiae. Ratione ad voluptate quaerat consectetur neque. Quasi commodi sunt dolores eaque! Porro reiciendis consequatur, numquam, molestiae quos accusantium voluptas quod at pariatur autem veritatis suscipit alias asperiores culpa veniam dolore nobis tenetur nemo quaerat officia dolores fugit? Nemo quia, sint enim voluptas consectetur dicta velit consequuntur veniam vel suscipit delectus iste aliquid dolorum doloremque sed aut cumque explicabo laborum, pariatur quod vero illo doloribus minima. Ut ullam cum illum enim consequuntur laborum dolorum nemo porro doloribus labore repellat atque, nulla sequi omnis quas eos voluptate odit harum? Placeat, ea!
    </div>
</div>

.clearfix::after{
    content: "";
    display: block;
    clear: both;
}
.container{
    background: lightblue;
    border: solid 2px;
}
.aside{
    background: lightgreen;
    border: solid 2px;
    float: right;
    width: 200px;
    margin-left: 20px;
}
.main{
    background: lightcoral;
    border: solid 2px;
    overflow: hidden;
}

1.2 三栏布局

和两栏布局类似，主要aside定宽，再设为浮动，一个左浮动一个右浮动。注意浮动后的高度坍塌。然后给中间内容区域设为BFC。最后根据需要给浮动盒设置margin。

<div class="container clearfix">
    <aside class="left">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore iure nam reprehenderit impedit eius quisquam quia labore, sequi sunt modi aut sint repudiandae totam quod magnam expedita incidunt earum ex illum ipsa facere fuga rem? Obcaecati mollitia rerum, fuga quis officia perferendis enim nihil fugiat, veritatis numquam quae incidunt eveniet, corrupti ex placeat quaerat accusamus. Veritatis officiis, modi vero quo natus cumque ullam autem laboriosam aliquam culpa placeat dicta quidem nesciunt illo esse ipsa vitae rem? Quasi, modi voluptate. Quis repellendus, eum recusandae repellat tempora aliquam, praesentium labore obcaecati reiciendis sunt tenetur. Natus officia obcaecati dolor, velit assumenda nesciunt rem quisquam, deleniti ullam odio laboriosam cupiditate ipsum totam quos, esse veritatis molestias laborum repudiandae reprehenderit magni. Temporibus vel minus aperiam dolores sed vero, a, possimus, quasi modi architecto ea minima dolorem? Dignissimos modi corporis molestiae labore repudiandae vero minima, doloremque et, obcaecati nemo quo. Ipsam iure, fuga quos blanditiis quidem adipisci quod aliquam facere doloremque exercitationem unde quia reiciendis dolorem dolores ipsa ducimus assumenda cumque! Voluptatum ullam illo nam pariatur sapiente quam facilis suscipit natus dolor dolorum quaerat eius ea illum fugiat ipsum sunt quod, tempora consequuntur ab! Similique rerum iusto soluta commodi quibusdam nobis hic voluptatem placeat perspiciatis tempora.
    </aside>
    <aside class="right">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos mollitia doloribus recusandae repellat deleniti sint exercitationem rerum optio. Adipisci enim fuga et doloribus ex blanditiis alias laboriosam omnis voluptatem repudiandae quam veniam beatae, expedita iusto perferendis aliquid numquam inventore harum temporibus? Quos, facilis porro? Consectetur aspernatur sapiente nemo recusandae neque at ab deserunt fugit quia mollitia, officiis dolorum. Amet error nisi consequuntur, et labore dolorum repellendus laborum sapiente perspiciatis assumenda, aliquid, iusto quisquam necessitatibus. Minima, neque dolores sint quae consequatur adipisci. Autem voluptatum doloribus beatae explicabo reiciendis, veritatis blanditiis possimus voluptas maxime fugiat optio odio vero dignissimos rerum laudantium delectus dolore, nostrum recusandae neque? Fugiat placeat laboriosam dolorum, voluptate quos, nesciunt quis est praesentium aspernatur, voluptatibus doloribus error nam magnam porro in rerum. Qui earum sequi exercitationem nulla incidunt voluptate sint doloribus mollitia vel dolor, ut provident animi, debitis quam! Iure non vel assumenda perferendis consectetur enim voluptates corporis odio, commodi cum. Fugit excepturi provident soluta harum dolorem distinctio dolores unde assumenda. Explicabo distinctio doloribus tempore aut. Quam ea nulla tempore, vitae quod quibusdam facilis quasi ex placeat fuga sunt nihil voluptate ipsum reiciendis voluptas officiis qui odit animi, reprehenderit ullam illo amet. Deleniti placeat rem consequuntur debitis odit dolorem possimus. Quisquam quis ipsa aut veniam rerum dolorum! Expedita veritatis animi, illum reprehenderit delectus qui repellat eum necessitatibus recusandae eveniet ut cum voluptates id impedit laborum quod accusantium voluptas tempora harum hic est dolore dolor itaque aspernatur. Cum voluptates odit, praesentium vel velit accusantium placeat distinctio perferendis, possimus tempora blanditiis, id consequatur eligendi molestiae dolores rerum labore? Quia voluptates a illum necessitatibus quibusdam blanditiis tempore, voluptatum quaerat doloremque quis reprehenderit fugit officia voluptatibus dolores esse veniam impedit eius laudantium commodi ab et molestiae expedita. Dolorem similique incidunt explicabo, tenetur impedit nobis ea iusto qui rem temporibus, exercitationem recusandae facilis autem.
    </aside>
    <div class="main">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, quisquam exercitationem? Dolore quisquam accusantium, perferendis harum quas dolorem repellat animi nam impedit fuga? Neque beatae quidem minus veritatis sequi quam perferendis temporibus optio vel quas! Non fuga harum autem nihil asperiores est quis, vero, veritatis distinctio tenetur itaque explicabo, architecto neque. Velit maiores, officiis amet aliquid architecto ullam voluptatibus distinctio nisi, modi temporibus sint asperiores adipisci rerum quaerat hic aspernatur ad non labore in pariatur. Quidem, dolore! Ducimus ullam, obcaecati eius accusantium minus iusto odit placeat? Officia fugit provident, velit molestias vel delectus ea! Architecto, aut eaque. Nostrum, porro facilis unde eius deserunt excepturi ex hic? Ipsam, voluptates id. Odit, quisquam error, recusandae assumenda qui voluptates reiciendis culpa, ullam esse modi rem maxime accusamus natus ad sequi ut. Similique odio amet, rem delectus tenetur laudantium nam at explicabo impedit assumenda, fuga cupiditate hic ipsam modi quasi quisquam quaerat obcaecati unde facere corrupti vel consectetur vitae. Nostrum aperiam eligendi placeat sequi eaque. Expedita velit enim quae error libero aut numquam eum illum, incidunt debitis labore, nesciunt quas repudiandae provident deleniti iure et maxime consequatur laboriosam, necessitatibus dolorem vel eaque rem. Provident maiores delectus dolorum quia rerum tenetur? Culpa et cum laboriosam repellendus cupiditate explicabo id! Animi, et quia ipsum aliquid voluptatibus deleniti provident sequi assumenda dignissimos autem sunt illum qui, corrupti ratione atque voluptatum optio quas doloremque. Placeat libero reiciendis veritatis! Officiis accusantium consectetur libero vel laboriosam similique repudiandae eum at culpa quibusdam atque quis saepe reiciendis modi, omnis magni iusto voluptate maiores dicta deserunt illo cumque suscipit nobis ut! Fugiat nam odit esse omnis aliquam! Inventore pariatur voluptate amet molestiae! Optio eaque, perferendis facilis, impedit quibusdam corrupti eligendi est laboriosam officia officiis temporibus pariatur itaque quasi veniam delectus numquam ducimus? Odio itaque perspiciatis quis. Qui cumque perferendis nulla itaque ut voluptatum eveniet fugiat inventore, quae delectus sint, quisquam aliquam quam hic iusto molestias magni? Pariatur recusandae illum reiciendis, soluta quas delectus animi, adipisci quae quidem error dolorum. Sint ad non error ea, distinctio tempora, fugit asperiores illum temporibus quis natus laborum repellat quas minima quasi numquam velit? Assumenda incidunt perferendis natus! Omnis nostrum optio repellendus atque necessitatibus eos alias, eius dolores, odit officiis similique porro quia vitae? Accusamus iure iusto, suscipit eos hic dolore adipisci neque dolorum corporis odit ipsum delectus laudantium tenetur cumque, porro possimus ratione molestiae reiciendis. Voluptatem facere harum porro eum quisquam reprehenderit ea voluptas nihil iusto! Aperiam natus sed sit accusantium dolorum, illo ea nostrum iusto nemo, ipsa delectus quidem quisquam. Sint, aperiam vitae? Quo recusandae, accusamus sequi sapiente aliquid reprehenderit esse unde officiis pariatur commodi! Cumque dolor aliquid numquam et, quidem, culpa adipisci, soluta dicta quas maiores consectetur qui ea nemo eligendi mollitia dolorem voluptate odio tempore commodi quia dolores recusandae nulla sequi itaque. Maxime quaerat magni, aliquam assumenda quas reprehenderit, earum quidem repellendus tempora, fuga ut dolor hic enim cumque alias totam nulla voluptatum provident quos nisi porro? Suscipit, a at. Voluptatibus debitis maxime porro, accusantium aliquid, ullam odio dicta, ad esse recusandae maiores.
    </div>
</div>

.clearfix::after{
    content: "";
    display: block;
    clear: both;
}
.container{
    border: solid 2px;
}
.left{
    float: left;
    border: solid 2px;
    background: lightblue;
    width: 200px;
    margin-right: 20px;
}
.right{
    float: right;
    border: solid 2px;
    background: lightgreen;
    width: 200px;
    margin-left: 20px;
}
.main{
    border: solid 2px;
    background-color: bisque;
    overflow: hidden;
}

2. 等高布局

1.CSS3的弹性盒

2.使用JS

3.伪等高

伪等高只是视觉上的等高，而且不够灵活，是不完美的等高布局方法。

• 侧边栏高度height设为很大的值，margin-bottom设为负值，使盒模型的总高度为一个小的正值；
• 再给父元素加上overflow设为hidden，隐藏侧边栏盒模型超出父元素范围的部分。

比如前面的两栏布局

<div class="container clearfix">
    <aside class="aside">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto laudantium reprehenderit perferendis in necessitatibus explicabo excepturi repellendus quas? Reiciendis commodi esse saepe id perspiciatis! Ea suscipit temporibus, nesciunt commodi aliquid minima quia distinctio consectetur libero perspiciatis magnam aliquam maiores maxime fugiat porro inventore nam aspernatur! Ipsa quam facilis in deleniti!
    </aside>
    <div class="main">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Necessitatibus recusandae animi iste mollitia sunt, reiciendis eius veniam sed fugit debitis sequi quibusdam blanditiis ullam assumenda non at esse dolor cumque cupiditate quo laborum, aliquid expedita? Dolorum suscipit quod consequuntur cum, in commodi blanditiis, aliquid, nisi esse nulla sequi dolor numquam! Aliquid obcaecati, sapiente possimus iure reprehenderit enim maxime sequi et amet laborum! Ratione voluptatibus cumque eos sapiente itaque, exercitationem laboriosam totam veritatis suscipit voluptates, placeat maxime rerum. Consectetur laboriosam vel placeat suscipit, doloribus quidem dolorum corporis at voluptatibus excepturi nostrum provident dolor fugit temporibus amet magni quisquam explicabo? Accusamus eligendi dignissimos facilis unde earum! Totam dolor consectetur suscipit dolorem perferendis et delectus quaerat reprehenderit, ad cum accusamus, assumenda, aliquid harum minus asperiores ea ut rerum provident commodi repellendus ab nemo. Impedit laboriosam libero odit iure veritatis, recusandae, reiciendis, distinctio consectetur ex harum aspernatur? Molestiae exercitationem deserunt voluptatem eius obcaecati ex a, aliquam veritatis, fugiat aut amet, ea fuga tempora vero repellendus alias eum quia. Id doloribus reprehenderit dicta, blanditiis nostrum consequatur, eum cupiditate nulla exercitationem eveniet ad recusandae, dolorem quidem distinctio dolor perferendis tempora ipsa quae amet vitae molestias! Velit pariatur doloribus aspernatur blanditiis minima repellendus quibusdam eaque sequi! Officia nisi quisquam suscipit repellat ullam quaerat in minus eaque. Quo, architecto impedit. Sint, porro repudiandae ducimus perspiciatis quae voluptatum ad aspernatur. Soluta vel quas inventore ad sapiente facilis voluptas debitis nulla at cupiditate magnam consectetur aperiam labore, qui maxime voluptatibus pariatur, fugit in voluptate harum ipsam. Ipsam ut a ea? Illum veniam architecto eius expedita, eveniet est corrupti? Excepturi vero laborum quod, ut dicta placeat rem repudiandae, deserunt amet nam neque, magnam eum corrupti pariatur! Quaerat voluptatem itaque veniam aspernatur alias tempore voluptas aliquid voluptatibus iusto inventore reprehenderit necessitatibus placeat dolorum esse vero nulla sapiente, consequuntur maxime laborum aut provident ducimus id consequatur! Dicta, saepe nostrum. Eius quidem placeat quia eveniet sunt voluptatem beatae, non quas molestias blanditiis accusantium, vel, asperiores veritatis facere officiis laborum et sequi ex velit sapiente at possimus! Tempore quidem, cupiditate vero dolore qui earum totam harum ipsa iste doloribus. Enim vitae doloribus quam totam, cum tenetur consectetur mollitia, amet magnam voluptates expedita, illum minima quo corrupti iure vero fugiat cupiditate autem odio recusandae velit. Sequi vel quas molestias accusantium porro eligendi quo quasi nesciunt. Dignissimos explicabo illum consectetur ipsa nam omnis quasi laudantium odit soluta aperiam quisquam autem eos, fuga impedit incidunt. Vero, nihil officiis quod repellendus harum quam aliquid vitae deserunt perferendis sapiente, iure assumenda eligendi ratione illo dolorum fuga. Ducimus suscipit aliquam sint autem facilis? Distinctio aliquam itaque minus perferendis aperiam cum pariatur eos mollitia, voluptatibus delectus esse sit ad impedit, maxime accusantium possimus. Eveniet nobis accusantium voluptatem, asperiores doloribus adipisci nam hic modi cum expedita, quis corrupti. Natus cum officia hic explicabo doloremque quisquam accusamus vitae beatae dolorem numquam qui, rem error id, omnis quia ullam impedit iusto distinctio veritatis ducimus eum perferendis, pariatur ea veniam! Totam, omnis iure ipsa commodi, soluta a non magni mollitia nisi exercitationem quis nam beatae voluptatem nostrum? Voluptatem quaerat harum atque cupiditate distinctio ipsa voluptates natus voluptatum soluta quidem corrupti facilis aspernatur consectetur, provident tempora molestiae! Iure accusamus non officia consectetur, soluta quae. Architecto laudantium quas sed pariatur eum ducimus placeat fuga quisquam nam repudiandae, vero blanditiis et ullam ipsa doloremque nesciunt aliquam maxime. Similique, molestiae? Nam voluptatum, asperiores beatae natus vero, veniam minus quos, facilis sapiente fugit quis incidunt optio. Nulla ea nesciunt itaque est officia, eveniet deleniti accusamus repudiandae quae similique libero assumenda dolores, ipsum voluptate excepturi, modi veniam voluptas dignissimos. Aut unde a, blanditiis aspernatur neque fugit est consectetur praesentium eveniet officiis delectus error repellat ex adipisci distinctio modi dicta consequatur perferendis facilis ullam! Obcaecati rem magnam dicta deserunt magni ipsum, culpa porro quidem velit mollitia consequatur. Ea voluptas itaque doloremque laboriosam sint. Voluptatibus provident sint blanditiis consequuntur autem cum molestias consectetur numquam animi doloremque magnam quisquam possimus qui ab eos quam, nisi porro optio, veritatis tenetur? Natus saepe cumque adipisci alias unde molestias ipsum totam. Velit voluptatibus aut corrupti saepe pariatur enim minima id. Soluta nemo sit explicabo fuga et impedit deserunt deleniti voluptas! Ducimus voluptate sapiente beatae doloribus, corrupti quibusdam est cum incidunt non repellat assumenda rerum, tenetur aut officia animi quam? Error cupiditate inventore consequatur, beatae distinctio, maxime odit molestias incidunt, eaque sequi architecto quae dolorum impedit adipisci aspernatur dicta. Delectus, ea aut laboriosam vitae asperiores numquam est commodi consequuntur nisi placeat eaque ex ducimus perspiciatis dolor unde et ipsa consequatur, qui labore, expedita perferendis magni. Dolores quaerat aliquam voluptatibus unde nostrum soluta quia dignissimos veritatis molestiae dicta, vitae explicabo ullam magni culpa sint nobis dolore, obcaecati voluptatem cumque quos. Beatae corporis maiores assumenda ducimus velit veritatis perferendis eligendi nihil enim eum, eius fugit at aspernatur dolor adipisci impedit, odio alias modi rem. Eum sed non magnam delectus ullam exercitationem odit ratione, tempora vero. Tenetur unde dicta perferendis magnam tempora quae maiores, quaerat repudiandae sit ut fuga dolorum est soluta delectus asperiores, laborum, necessitatibus exercitationem quo. Laudantium in magni ex tenetur odio alias, corporis a, ipsum eos similique nihil deleniti officia harum rerum dicta cum veniam iure eius blanditiis dolores. Nemo aliquam ad voluptatem assumenda ipsum quis unde, ea magnam voluptatum. Non corporis similique voluptas veritatis harum! Dolorum ea similique ipsam quas tempora doloremque quisquam, consectetur veniam voluptatem nihil laboriosam reiciendis est cum maiores, ipsa, quibusdam earum? Consequuntur a doloremque perferendis eligendi reprehenderit delectus officia quis beatae, cumque quo libero mollitia at velit veritatis deleniti earum possimus suscipit unde incidunt blanditiis itaque, tempore rem odio sit? Voluptate aliquid iure sed commodi accusamus molestias accusantium modi quam magnam consequatur saepe numquam, atque, velit veniam, quod incidunt quos ut provident inventore cumque. Maxime illo officia id omnis expedita facere, quis velit nemo assumenda voluptatibus ipsam cupiditate saepe, quibusdam similique incidunt voluptate architecto, itaque sed soluta dolorem error autem veniam vel. Sed, velit id praesentium beatae ratione maiores assumenda quam totam consequatur nisi aliquam? Quis voluptatibus, omnis non, architecto quibusdam obcaecati ab, mollitia velit cupiditate eveniet est. Eligendi, quo. Pariatur ea explicabo aut!
    </div>
</div>

.clearfix::after{
    content: "";
    display: block;
    clear: both;
}
.container{
    background: lightblue;
    border: solid 2px;
    min-width: 700px;
    overflow: hidden;
    margin: 20px 50px;

}
.aside{
    background: lightgreen;
    border: solid 2px;
    float: right;
    width: 200px;
    margin-left: 20px;
    height: 10000px;
    margin-bottom: -9990px;
}
.main{
    background: lightcoral;
    border: solid 2px;
    overflow: hidden;
}

3. 元素书写顺序

上述的多栏布局都必须浮动的侧边栏写在前面，因为如果将常规流盒子写在前面，则浮动的侧边栏会避开常规盒排列。

但是这样的书写顺序不利于SEO，因为我们希望网页的主要内容先被加载。

若将主要内容区域写在前面，实现多栏布局，只能利用margin给main区域预留一定的空间。再将侧边栏利用绝对定位放置在区域侧边。

<div class="container">
    <div class="main">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Delectus eaque illo architecto nostrum natus nesciunt eum rerum, dignissimos sit? Ipsum facilis praesentium delectus, et, consequuntur asperiores possimus ex consectetur porro nemo sunt placeat? Maxime consequuntur esse aliquid voluptatum eius ipsum exercitationem inventore veniam itaque voluptatibus autem voluptas numquam rem, doloribus iste nihil! Iusto, accusantium officiis nesciunt voluptatum doloremque, ipsa id aperiam blanditiis rerum autem ex ea eos at nulla illo. Reiciendis inventore ut nam harum sunt aliquid fuga assumenda in velit doloribus. Sit rem laboriosam dignissimos officiis, sed expedita quibusdam, cumque non aliquam doloribus dicta totam officia sunt commodi! Tenetur vel a eius, numquam quasi doloremque maiores, veritatis in, sit aperiam non nobis! Magnam ea et, repellat cupiditate suscipit fugiat aliquam nihil tenetur eum assumenda ipsum, facere perferendis praesentium? Amet ut quo quod aperiam totam corporis fuga nisi esse eaque officiis qui impedit dicta cumque itaque sint veritatis culpa, molestiae sed. Soluta voluptate ea sequi iusto possimus tempora cumque commodi itaque, repudiandae, fugiat fuga, ipsam suscipit quo velit tenetur aut nihil pariatur culpa! Repudiandae earum at quae odit dolorum nostrum quis perspiciatis minus! Ex cumque magni obcaecati, eum quisquam beatae soluta sapiente. Officiis eaque impedit voluptates, molestias obcaecati repellat. Nisi molestiae tempore fugit magni dolores nam, vitae a eveniet numquam aspernatur eius autem molestias quaerat placeat omnis deleniti nesciunt. Expedita aperiam at sed saepe ea quas, tempore nam, soluta eos iure unde autem? Recusandae ab ducimus odit deleniti asperiores neque, obcaecati aut facere nulla, ad voluptates similique placeat quisquam, eveniet numquam delectus eligendi nostrum? Ea tempore expedita error doloremque quis mollitia cumque eveniet consectetur porro inventore distinctio aliquam eum, adipisci cum placeat illum at quidem numquam, illo ad, aspernatur necessitatibus impedit. Tempora sed cum ab eos illum optio deleniti rem placeat obcaecati vero, quis doloremque repellendus libero, iusto dicta ratione?    
    </div>
    <aside class="left">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. 
    </aside>
    <aside class="right">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit.
    </aside>
</div>

.container{
    border: solid 2px;
    position: relative;
}
.main{
    border: solid 2px;
    margin: 20px 200px;

}
.left{
    border: solid 2px;
    width: 150px;
    background-color: aquamarine;
    position: absolute;
    top: 20px;
    left: 20px;
}
.right{
    border: solid 2px;
    width: 150px;
    background-color: aquamarine;
    position: absolute;
    top: 20px;
    right: 20px;
}