CSS_浮动排版布局

当在排版布局时，abc都用了float，此时abc相当于脱离父元素浮出来了，但是d没有使用浮动，就会出现d的一部分处在abc的下面(因为abc浮上去了),d就被遮住了一部分，这时候有几种处理方法：

（1）在abc的外层加上一层父元素，并设定高度

<!DOCTYPE html>
<html lang="en">
<head><style type="text/css">.outer{height: 100px;}<!--其他的样式设置省略掉了--></style>
</head>
<body><div class="outer"><div class="a"></div><div class="b"></div><div class="c"></div></div><div class="d"></div>
</body>
</html>

为什么要设置父元素呢，子元素不是设置了大小，不是应该被子元素撑开吗？？

因为abc三个子元素设置了浮动，相当于浮起来了，不占据空间，所以撑不开，所以设置高度是一种解决这个问题的方法。

（2）方法2：给父元素设置属性overflow:auto;

overflow:溢出的意思。

auto:自动调整的意思

意思是对于超出父元素的元素，父元素自动调整高度，就不会影响后面的布局

        .outer{overflow: auto;}

（3）方法3：clear：left/right/both

谁不希望受到浮动的影响谁就设置clear属性

此时d不想受到浮动的影响，所以将.d设置clear属性

.d{width: 100%;background: lightskyblue;height: 200px;clear: both;}

CSS_浮动排版布局相关推荐

css关于控制div靠左或靠右的排版布局
关于控制div靠左或靠右的排版布局,我整理三种平时用到的css属性小知识(元素模块靠左或靠右排版): 1.float属性(float 属性定义元素在哪个方向浮动) 值:left(元素向左浮动).rig ...
QuarkXPress 2018—图文设计排版布局工具
想让你的图书页面更加精美?想要一款专业的图文设计排版布局工具?QuarkXPress 2018推荐给大家!QuarkXPress 2018是一款功能强大的图形设计和网页排版布局工具,它被设计师.出版商 ...
iOS SwiftUI篇-3 排版布局layout
iOS SwiftUI篇-3 排版布局layout swiftUI提供的layout有: ZStack.GeometryReader.HStack.LazyVGrid.LazyHStack.LazyH ...
Android Studio 工具窗口浮动与布局恢复【申明：来源于网络】
Android Studio 工具窗口浮动与布局恢复[申明:来源于网络] http://bbs.chinaunix.net/thread-4182438-1-1.html 转载于:https://ww ...
html显示多张照片的布局,多图片如何排版？手把手教你多图排版布局
确实,当我们遇到很多图片时,总是容易被排版困住,不知道该如何更好的处理图片布局不要慌,稿叔今天就和大伙分享我在排版时经常参考的案例,同时还有5个关于排版的技巧以及多图排版神器一并送上,希望能够帮助到 ...
html学生设计作品,7个最佳学生作品集网站，作品、排版布局、配色总有一点惊艳你...
原标题:7个最佳学生作品集网站,作品.排版布局.配色总有一点惊艳你优秀的作品集网站不仅仅是展好作品的平台也是我们学习排版布局和配色的渠道今天给大家介绍2017年全球的7个高质量学生作品集网站, ...
平面设计版面设计是什么，平面设计图片排版布局技巧有哪些夏雨老师
平面设计师,要提高自己的版式设计水平,首先需要掌握一定的核心理论知识,让自己具备解构优秀版式设计的能力,你便能从优秀的设计作品中吸取到有用知识.长此以往,便能得到一个正向的进步提升!因此我们首先要知道 ...
此页面处于怪异模式，排版布局可能会受到影响。若需要标准模式，请使用“!DOCTYPE html”。
一.报错二.原因一.报错此页面处于怪异模式,排版布局可能会受到影响.若需要标准模式,请使用"!DOCTYPE html".详细了解导致:页面打开是空的,什么内容也没有~ 二 ...
李洪强和你一起学习前端之(8)浮动,网页布局,定位
2.1标准流(文档流) 块级元素独占一行显示,标准流的显示方式让两个盒子在一行显示 <!DOCTYPE html> <html> <head> <meta ...

CSS_浮动排版布局

CSS_浮动排版布局相关推荐

最新文章

热门文章