布局方式-float布局
<style>
.container{
background: red;
width: 400px;
}
.p1{
background: green;
float: left;
width: 200px;
height: 50px;
}
</style>
<body>
<div class="container">
<span class="p1">float</span>
<div class="p2">
很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字很长的文字
</div>
</div>
</body>
这个效果很明显就是,p1设置了向左浮动,高度50,宽度200,背景绿色。浮动之后有什么影响呢?我们上面注意点之一是脱离了文档流。
我们看到p2在使用的时候占据了p1的空间,跟container是一样的空间大小。但是他影响了p2文字的展现。整个文字都绕开了p1。这种布局方式就是float本身的一个含义。float本身就是用于图文环绕效果的。所以这个解释了上面的注意点,float元素脱离了文档流,但是不脱离文本流。
<style>
.container{
background: red;
width: 400px;
}
.p1{
background: green;
float: left;
width: 200px;
height: 50px;
}
</style>
<body>
<div class="container">
<span>写几个字</span>
<span class="p1">
float
</span>
<span class="p1">
float
</span>
</div>
</body>
如图,首先看到的几个字,如果上面demo的p2一样。是一个正常的元素。我们说会尽量靠上和尽量靠左。所以是左上角的位置。再往下又有一个float元素,这两个float元素样式是一模一样的。但是那几个字是必须排的。所以他没办法越过那几个字。所以尽量靠上,靠左,就成了这副样子。
如果,两个flaot元素长度加起来大于400了,他就会往下掉。。这就是尽量靠上,尽量靠左的含义。
<style>
.float{
float: left;
width: 100px;
height: 100px;
background: red;
}
</style>
<body>
<div class="main">
<span class="float">
float元素
</span>
</div>
</body>
我们看到float元素的宽高是有100像素的,但是main的高度却是0,没有被撑起来。高度塌陷了,防止塌陷的常用办法就是设置overflow,创建一个BFC。
<style>
.container{
width: 800px;
height: 200px;
}
.left{
float: left;
background: red;
width: 200px;
height: 100%;
}
.right{
background: blue;
margin-left: 200px;
height: 100%;
padding-left: 10px;
}
</style>
<body>
<div class="container">
<div class="left">
左
</div>
<div class="right">
右
</div>
</div>
</body>
<style media="screen">
html *{
padding: 0;
margin: 0;
}
.layout article div{
min-height: 100px;
}
</style>
<body>
<section class="layout float">
<style media="screen">
.layout.float .left {
float: left;
width: 300px;
background: red;
}
.layout.float .right{
float: right;
width: 300px;
background: blue;
}
.layout.float .center{
background: yellow;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>浮动解决方案</h1>
1、这是三栏布局中间部分
1、这是三栏布局中间部分
</div>
</article>
</section>
</body>
布局方式-float布局的更多相关文章
- CSS布局方式--inline-block 布局
布局其实就是想办法怎样将一些元素横向的排列起来,纵向由于块级元素的存在会自动占据一行. inline-block 元素会占据一行而且可以调整宽高很适合将这些元素排列在一行,而且使用 inline-bl ...
- CSS布局:Float布局过程与老生常谈的三栏布局
原文见博客主站,欢迎大家去评论. 使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloa ...
- 转:CSS布局:Float布局过程与老生常谈的三栏布局
使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为 ...
- 布局方式-flex布局
.弹性盒子 .盒子本来就是并列的 .指定宽度即可 <style> .container { width: 800px; height: 200px; display: flex; bord ...
- inline-block布局方式
刚研究了一下inline-block布局方式 inline-block布局方式是一种比float浮动更优的一种布局方式. 一个超简单的demo html: <!doctype html> ...
- Android 布局方式学习
一.LinearLayout线性布局: 线性布局是程序中最常见的一种布局方式,线性布局可以分为水平线性布局和垂直线性布局两种, 通过android:orientation属性可以设置线性布局的方向 1 ...
- PyQt5四大布局方式
1.绝对布局方式'''绝对布局方式,通过move的XY坐标方式来控制控件的位置'''from PyQt5.QtWidgets import *import sys,math class absolut ...
- Android布局方式总结
Android的布局分别是:线性布局LinearLayout.相对布局RelativeLayout.帧布局FrameLayout.网格布局GridLayout.约束布局ConstraintLayout ...
- Html5 布局方式
在Html5之前,统一采用的是Div+css的方式进行布局,但是却和开发人员的命名方式,喜好有关.在新的Html5中,布局却显得更加人性化,更易理解了.如增加了Header,Footer,Sectio ...
随机推荐
- jenkins 部署应用
一,安装rpm包 安装jdk 安装jenkins 查看jdk是否安装成功 启动jenkins systemctl start jenkins 开机自启 systemctl enable jenkins ...
- JavaScript设计模式(二) - 单例模式
什么是单例模式? 单例模式从字面上的理解是不困难的,js上就是指只有一个对象实例. 为什么需要单例模式? 我们可以将一些成员变量封装在一个单例对象中,每次访问这些变量都只能从这个单例对象进行访问,这样 ...
- Ubuntu Server 14 配置
语言 在虚拟机中安装了Ubuntu Server. Ubuntu Server只有控制台,没有图形界面.要在控制台下安装中文支持很麻烦.所以直接设置为英文,反正我看得懂. 在安装的时候必须将" ...
- filter get乱码 全站编码解决 包装模式
包装模式简介: package com.itheima.test; import java.io.BufferedReader; import java.io.IOException; import ...
- nyoj 409——郁闷的C小加(三)——————【中缀式化前缀后缀并求值】
郁闷的C小加(三) 时间限制:1000 ms | 内存限制:65535 KB 难度:4 描述 聪明的你帮助C小加解决了中缀表达式到后缀表达式的转换(详情请参考“郁闷的C小加(一)”),C小加很 ...
- Python Fabric ssh 配置解读
Python Fabric ssh 配置解读 Fabric 2.4简介: Fabric is a high level Python (2.7, 3.4+) library designed to e ...
- 在浏览器中对访问的网页中的cookie添加和修改
做权限相关的东西,使用到了cookie,关于它的安全性,cookie在浏览器中,通过插件是可以对其进行修改的,如下: 1.FireFox 安装Edit This Cookie 插件,之后点击插件图标即 ...
- 项目搭建系列之三:SpringMVC框架下使用Ehcache对象、数据缓存
注明:该文章为以前写的文章,这里只更改了标题,无GitHub源码下载. 一.准备工作 如果已经成功搭建SpringMVC环境,那么就可以进入Ehcache的准备工作了.1.下载jar包 Ehca ...
- 使用网络技术---WebView
混合技术 1.使用WebView 权限声明: 定义WebView 填充网页: webView=findViewById() //启用js WebSetting seter = webView.sett ...
- 网站部署中遇到的问题-网页中js,css和图片资源无法加载
问题描述: 打开的网页跑版,图片无法加载,用控制台调试发现css和js都没有加载. 原因: 没有启用IIS"静态内容". 解决方法: 设置"打开或关闭windows功能& ...