flyrui316
flyrui316

CSS那些事儿-阅读随笔3（清除浮动）

　　浮动主要是由浮动（float）属性导致的页面错位现象，清除浮动不仅能解决页面错位的现象，还可以解决子元素浮动导致父元素背景无法自适应子元素高度的问题。在CSS样式中，主要利用clear属性中的both、left和right 3个属性值清除由浮动产生的左、右浮动效果。

一、浮动现象例子

下面举一个很简单的浮动的例子，假设一个float_box（背景色为#aff）中包含两个div，且一个是左浮动（float:left），另一个是右浮动（float:right）。在float_box外再添加一个没有浮动属性的div（no_float），那么代码以及预期效果和实际效果如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>css-test</title>
 6     <style>
 7         .float_box{
 8             background-color: #aff;
 9         }
10         .float_left{
11             float:left;
12             width: 200px;
13             height: 100px;
14             border: 2px solid #f00;
15         }
16         .float_right{
17             float:right;
18             width: 200px;
19             height: 100px;
20             border: 2px solid #00f;
21         }
22         .no_float{
23             color: #fff;
24             background-color: #aaa;
25         }
26     </style>
27 </head>
28 <body>
29 <div class="float_box">
30     <div class="float_left">左浮动元素</div>
31     <div class="float_right">右浮动元素</div>
32 </div>
33 <div class="no_float">测试位置</div>
34 
35 </body>
36 </html>
View Code

   CSS那些事儿-阅读随笔3（清除浮动）_第1张图片    CSS那些事儿-阅读随笔3（清除浮动）_第2张图片

                                     a.预期效果                                                                                 b.实际效果

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　图1 效果图

二、消除浮动的方法

1.利用br元素的clear属性

　　br标签属性中的clear属性具有left、right和all三个属性值，可以用来清除浮动。但是此种方法需要引入一个额外的br标签，破坏了HTML的原有结构。代码如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>css-test</title>
 6     <style>
 7         .float_box{
 8             background-color: #aff;
 9             /*zoom: 1;*/
10             /*overflow: hidden;*/
11         }
12         .float_left{
13             float:left;
14             width: 200px;
15             height: 100px;
16             border: 2px solid #f00;
17         }
18         .float_right{
19             float:right;
20             width: 200px;
21             height: 100px;
22             border: 2px solid #00f;
23         }
24         .no_float{
25             color: #fff;
26             background-color: #aaa;
27             /*clear: both;*/
28         }
29     </style>
30 </head>
31 <body>
32 <div class="float_box">
33     <div class="float_left">左浮动元素</div>
34     <div class="float_right">右浮动元素</div>
35     <br clear="all">
36 </div>
37 <div class="no_float">测试位置</div>
38 </body>
39 </html>
View Code

效果如图1（a）所示。

2.利用css样式中的clear属性

　　a.引入br标签，但是为其添加css修饰.clear_float{clear:both;},代码如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>css-test</title>
 6     <style>
 7         .float_box{
 8             background-color: #aff;
 9             /*zoom: 1;*/
10             /*overflow: hidden;*/
11         }
12         .float_left{
13             float:left;
14             width: 200px;
15             height: 100px;
16             border: 2px solid #f00;
17         }
18         .float_right{
19             float:right;
20             width: 200px;
21             height: 100px;
22             border: 2px solid #00f;
23         }
24         .no_float{
25             color: #fff;
26             background-color: #aaa;
27             /*clear: both;*/
28         }
29         .clear_float{
30             clear: both;
31         }
32     </style>
33 </head>
34 <body>
35 <div class="float_box">
36     <div class="float_left">左浮动元素</div>
37     <div class="float_right">右浮动元素</div>
38     <br class="clear_float">
39 </div>
40 <div class="no_float">测试位置</div>
41 </body>
42 </html>
View Code

效果如图1（a）所示。

　　b.在发生浮动的元素后的元素中添加.clear_float{clear:both;},避免引入多余的HTML元素，代码如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>css-test</title>
 6     <style>
 7         .float_box{
 8             background-color: #aff;
 9             /*zoom: 1;*/
10             /*overflow: hidden;*/
11         }
12         .float_left{
13             float:left;
14             width: 200px;
15             height: 100px;
16             border: 2px solid #f00;
17         }
18         .float_right{
19             float:right;
20             width: 200px;
21             height: 100px;
22             border: 2px solid #00f;
23         }
24         .no_float{
25             color: #fff;
26             background-color: #aaa;
27             /*clear: both;*/
28         }
29         .clear_float{
30             clear: both;
31         }
32     </style>
33 </head>
34 <body>
35 <div class="float_box">
36     <div class="float_left">左浮动元素</div>
37     <div class="float_right">右浮动元素</div>
38 </div>
39 <div class="no_float clear_float">测试位置</div>
40 </body>
41 </html>
View Code

效果如下图：

CSS那些事儿-阅读随笔3（清除浮动）_第3张图片

　　可以从上图中看出，虽然这种方法清除了浮动的错误，但是float元素的父元素高度没有适应float元素的高度（背景没颜色）。

3.利用css中的overflow属性

　　为float元素的父元素添加css属性overflow:hidden，也可以清除浮动且高度适应。但是该属性会使div溢出部分隐藏，存在弊端。代码如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>css-test</title>
 6     <style>
 7         .float_box{
 8             background-color: #aff;
 9             overflow: hidden;
10         }
11         .float_left{
12             float:left;
13             width: 200px;
14             height: 100px;
15             border: 2px solid #f00;
16         }
17         .float_right{
18             float:right;
19             width: 200px;
20             height: 100px;
21             border: 2px solid #00f;
22         }
23         .no_float{
24             color: #fff;
25             background-color: #aaa;
26         }
27     </style>
28 </head>
29 <body>
30 <div class="float_box">
31     <div class="float_left">左浮动元素</div>
32     <div class="float_right">右浮动元素</div>
33 </div>
34 <div class="no_float">测试位置</div>
35 </body>
36 </html>
View Code

效果如图1（a）所示。

注：overflow:visible清除浮动只对ie浏览器有效，overflow:auto清除浮动且多层嵌套时，会对点击事件产生影响。

4.利用css中的display:table属性

　　为float元素的父元素添加css属性display:table，也可以清除浮动且高度适应。但是会引起意想不到的后果。代码如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>css-test</title>
 6     <style>
 7         .float_box{
 8             background-color: #aff;
 9             display:table;
10         }
11         .float_left{
12             float:left;
13             width: 200px;
14             height: 100px;
15             border: 2px solid #f00;
16         }
17         .float_right{
18             float:right;
19             width: 200px;
20             height: 100px;
21             border: 2px solid #00f;
22         }
23         .no_float{
24             color: #fff;
25             background-color: #aaa;
26         }
27     </style>
28 </head>
29 <body>
30 <div class="float_box">
31     <div class="float_left">左浮动元素</div>
32     <div class="float_right">右浮动元素</div>
33 </div>
34 <div class="no_float">测试位置</div>
35 </body>
36 </html>
View Code

效果如下图所示：

CSS那些事儿-阅读随笔3（清除浮动）_第4张图片

5.利用css伪对象::after

　　清除浮动的条件之一是必须在浮动元素之后，因此只能利用::after而不使用::before (对于ie浏览器，需要9或以上才支持)，代码如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>css-test</title>
 6     <style>
 7         .float_box{
 8             background-color: #aff;
 9         }
10         .float_left{
11             float:left;
12             width: 200px;
13             height: 100px;
14             border: 2px solid #f00;
15         }
16         .float_right{
17             float:right;
18             width: 200px;
19             height: 100px;
20             border: 2px solid #00f;
21         }
22         .no_float{
23             color: #fff;
24             background-color: #aaa;
25             /*clear: both;*/
26         }
27         .float_box::after{
28             clear: both;
29             display: block;
30             content: "";
31         }
32     </style>
33 </head>
34 <body>
35 <div class="float_box">
36     <div class="float_left">左浮动元素</div>
37     <div class="float_right">右浮动元素</div>
38 </div>
39 <div class="no_float">测试位置</div>
40 </body>
41 </html>
View Code

效果如图1（a）所示。

注：对于ie浏览器，上述方法都需要在.float_box中添加zoom:1属性，来消除ie的haslayout效果。

你可能感兴趣的:(CSS那些事儿-阅读随笔3（清除浮动）)

  • 大文件上传 前端javascript
    大文件上传通常需要分片处理、断点续传等技术来提高上传效率和可靠性。以下是一个简单的JavaScript示例，展示如何实现大文件的分片上传和断点续传：大文件上传上传//请求基准地址axios.defaults.baseURL='http://localhost:3000';//选中的文件varfile=null;//选择文件document.getElementById('fileInput').o
  • YashanDB归档日志文件管理 数据库
    本文内容来自YashanDB官网，原文内容请见https://doc.yashandb.com/yashandb/23.3/zh/%E6%95%B0%E6%8D%AE%...归档日志文件默认存放在$YASDB\_DATA/archive目录下。Note：本文以查询单机部署中的归档日志文档为例，不同部署形态查询方法相同但$YASDB\_DATA路径不同，具体请以实际为准。$cd/data/yasha
  • YashanDB redo日志文件管理 数据库
    本文内容来自YashanDB官网，原文内容请见https://doc.yashandb.com/yashandb/23.3/zh/%E6%95%B0%E6%8D%AE%...YashanDB的redo日志文件用于记录数据库产生的物理日志，可被用于数据库宕机重演和主备复制。redo日志文件有如下4种状态：NEW：表示新创建且未使用的redo日志文件。CURRENT：表示当前正在写入的redo日志文件
  • Unity 封装一个依赖于MonoBehaviour的计时器(下) 链式调用 咩咩-哈基米版 Unity案例实战全解析Unity框架学习unity游戏引擎
    [Unity]封装一个依赖于MonoBehaviour的计时器(上)-CSDN博客目录1.加入等待间隔时间"永远'执行方法2.修改为支持链式调用实现链式调用管理"链式"调度顺序3.测试即时方法编辑"永久"方法链式调用4.总结1.加入等待间隔时间"永远'执行方法我将这个计时器修改为了支持链式调用,不过我还是发现了一个问题,有些地方的计时器要求是这样子的usingUnityEngine;publicc
  • HTML标记语言＜head＞中 的几个元素 2301_79698214 html前端
    在HTML文档中，部分包含了文档的元数据（metadata），这对于网页的正确显示和搜索引擎优化（SEO）非常重要。部分通常包含以下几个重要的元素：：定义了网页的标题，这个标题会显示在浏览器的标题栏或页面的标签上。例如：我的网页：用于定义网页的元数据，如字符集、页面描述、关键词、作者、视口设置等。例如：：用于链接外部资源，如CSS文件、图标（favicon）等。例如：：用于直接在文档中嵌入CSS样
  • Kubernetes集群版本升级 后端java
    集群升级注意事项升级集群版本建议逐步升级，比如v1.20.1–>v1.21.1–>v1.22.1–>v1.23.1–>v1.24.1，不能跨度过大，否则会报错。升级步骤查看集群版本[root@hadoop102~]#kubectlgetnodesNAMESTATUSROLESAGEVERSIONhadoop102Ready,SchedulingDisabledcontrol-plane,maste
  • 2025年渗透测试面试题总结-阿里巴巴-阿里云安全（二面）（题目+回答） 独行soc 2025年渗透测试面试指南科技安全web安全面试职场和发展红蓝攻防阿里云
    网络安全领域各种资源，学习文档，以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具，欢迎关注。目录阿里巴巴-阿里云安全二面一、职业方向与技术偏好1.安全研究vs安全研发的定位二、云安全与身份认证2.云上PKI与身份认证的关注方向三、项目实践与成果3.字节跳动训练营项目四、攻防技术深度解析4.SQL注入攻防方案5.WAF防护原理五、团队协作与效能优化6.分工协作与个
  • DeepSeek R1 本地部署实战教程来了，带可视化界面，非常详细！ java
    大家好，我是R哥。虽然DeepSeek官方提供了可视化聊天界面，但稳定性实在太差了，动不动就服务繁忙，根本没办法正常使用。另外，对于一些对数据隐私、实时性能要求较高的场景，本地部署也是不可避免的选择。那么，如何本地部署DeepSeekR1的模型？本篇，开干！相关阅读：DeepSeek-R1本地部署配置清单DeepSeek-R11.5b、7b、8b、14b、32b、70b、671b都是什么鬼？如何部
  • Unity 封装一个依赖于MonoBehaviour的计时器(上) 基本功能 咩咩-哈基米版 Unity案例实战全解析Unity框架学习unity游戏引擎c#
    灵感来自下面这本书的协程部分,因此我就自己尝试写了一个我的新书Unity3D游戏开发（第3版）|雨松MOMO程序研究院如果你不知道什么是协程:unity保姆级教程之协同程序_unity协同-CSDN博客一句话概括:协程就是单线程的异步操作,其作用于Unity的主线程1.我写了如下几个功能(只展示无参数):基础校验privateboolCheckCount(intcount){if(countcal
  • SpringBoot项目集成分布式任务调度平台XXL-JOB 樱花语 分布式开发SpringBootXXL-JOB
    一、概述XXL-JOB是一个轻量级分布式任务调度平台，其核心设计目标是开发迅速、学习简单、轻量级、易扩展。现已开放源代码并接入多家公司线上产品线，开箱即用。二、特性1、简单：支持通过Web页面对任务进行CRUD操作，操作简单，一分钟上手；2、动态：支持动态修改任务状态、启动/停止任务，以及终止运行中任务，即时生效；3、调度中心HA（中心式）：调度采用中心式设计，“调度中心”自研调度组件并支持集群部
  • Electron + VUE3 桌面应用，主进程和渲染进程通信 读心悦 深入浅出的Electronelectronvue.js前端
    之前写过篇主进程和渲染进程之间的通信，这里主要是记录一下VUE版本的应用，主进程和渲染进程之间的通信。思路是一样，唯一不同的是代码。在开发Electron应用的时候，从安全的角度来考虑，尽量不要在渲染进程中，直接调用ElectronAPI，因此我们需要预加载JS脚本，在这个脚本中，把我们用到的API暴露出去。代码如下：constcreateWindow=()=>{constwin=newBrows
  • 一文吃透C++数组：概念与操作大揭秘 大雨淅淅 C++开发数据库c++开发语言
    目录一、C++数组初印象二、C++数组概念剖析2.1数组定义与本质2.2数组声明与初始化方式2.2.1声明2.2.2初始化2.3数组元素访问三、C++数组操作全解析3.1遍历数组3.1.1for循环遍历3.1.2范围for循环遍历3.2修改数组元素3.3获取数组大小3.4多维数组操作3.4.1二维数组3.4.2.多维数组拓展3.5数组作为函数参数3.5.1传数组名3.5.2函数原型声明四、C++数
  • c++基础详解 我要进步！ c++
    C++是一种功能强大且灵活的编程语言，用于系统编程、应用程序开发、游戏开发等多个领域。下面我将详细讲解C++的基础知识，涵盖以下几个方面：目录c++基础详解1.基本语法2.变量和数据类型3.运算符4.控制流5.函数6.数组和字符串7.指针和引用8.面向对象编程1.基本语法C++程序的基本结构如下：#include//包含输入输出流库​intmain(){  std::cout：包含标准输入输出库。
  • Unity 扩展方法 程序员也有头发 Unity开发unity游戏引擎游戏程序
    比如我们要给transform做还原方法publicstaticclassExtensionMethod{publicstaticvoidResetTransformation(thisTransformtrans){trans.position=Vector3.zero;trans.localRotation=Quaternion.identity;trans.localScale=Vector
  • 基于HarmonyOS实现计算器小应用 harmonyos前端
    基于鸿蒙next实现一个可以进行加减乘除的简单计算器。环境配置：DevEcoStudioNEXT5.0.2Api14功能实现：支持基本运算：加（+）、减（-）、乘（×）、除（÷）支持连续运算（如3+5-2）支持小数点输入支持清除功能（C）支持结果显示（=）支持负号输入（如-6+3=-3）案例效果：一、自定义构建组件实现计算器输入按钮绘制和界面的绘制//静态界面界面绘制build(){Column(
  • 「 DelegateUI 」Ant-d 风格的 Qt Qml UI 套件 梦起丶 QtDelegateUIQtQuick（Qml）开发之旅qtant-dqmlui-kitui
    写在前面：关于为什么要写一套新的UI框架一方面，QtQml生态中缺乏一套既遵循现代设计规范(自带的功能少且丑,懂得都懂)，又能深度整合Qt生态的开源组件库。另一方面，QtQml中也有一些其他方案，例如FluentUIQml，然鹅这个库老版直接不维护(新版不开源且Qt6.8+官方已经实现WinUI3风格组件)。因此，我决定自己写一套，但需要遵循一套现代UI设计规范，然后个人比较喜欢Ant-d的样式和
  • 使用工厂加策略模式实现操作日志记录 小灰灰是码农... 策略模式javaspringboot
    需求：1.培训班管理；2.报名列表管理；3.申请信息变更；4.申请发布；5.申请审批以上是本次需求中的5个功能菜单，根据客户需求，要求在上述功能操作中的每一步都要进行日志的记录，分别记录登录人信息，IP地址，操作时间，如果是修改要求记录为“修改姓名：张三→张小三”共有8中日志操作类型。日志实现的方案：方案一、使用切面类思路:切面类适合在不改变原有业务逻辑的基础上，对特定的方法进行增强。在这个场景中
  • HTML5拼图游戏开发经验分享 木木黄木木 html5前端html
    HTML5拼图游戏开发经验分享这里写目录标题HTML5拼图游戏开发经验分享前言项目架构1.文件结构2.核心功能模块技术要点解析1.响应式布局2.图片处理3.拖拽交互4.动画效果性能优化开发心得项目亮点总结源码分享写在最后前言在Web前端开发领域，通过实战项目来提升编程技能是最有效的学习方式之一。今天我要分享一个HTML5拼图游戏的开发经验，这个项目涵盖了现代前端开发的多个重要概念，包括响应式设计、
  • Electron+Vue3+Vite+ElectronForge整合 - 一键启动两个服务 & 一键打包两个服务 NorthCastle ElectronVue3electronvue.jselectron-forgeviteelectron整合vue一键启动一键打包
    说明本文介绍一下Electron+Vue3+Vite+ElectronForge的高级整合操作。vue3:使用TS的语法开发；Electron:使用JS的语法开发。本文将从项目初始化开始，一步一步的完成项目的启动、打包全流程的介绍。实现的效果是：1、一个正常的Vue3项目；2、整合加入Electron框架：开发时Electron加载的是开发的vue项目；【实现一键启动vue3项目+electron
  • Electron+Vue3+Vite+ElectronForge整合-全部ts开发 - 一键启动两个服务 & 一键打包两个服务 NorthCastle ElectronVue3electronvue.jselectronforgeelectron+vue整合一键打包一键启动
    说明本文介绍一下Electron+Vue3+Vite+ElectronForge的高级整合操作。vue3:使用TS的语法开发；Electron:使用TS的语法开发。补充：目前Electron的开发还是以JS为主，不过我们可以直接使用TS开发，在执行和打包时，先进行JS的编译就可以了。本文将从项目初始化开始，一步一步的完成项目的启动、打包全流程的介绍。实现的效果是：1、一个正常的Vue3项目；2、整
  • 从理论到实践：零拷贝技术的全面解读 超越不平凡 Java基础Java零拷贝
    目录一、I/O工作方式1.1DMA二、零拷贝2.1传统数据拷贝2.2Java应用数据处理2.3.零拷贝流程三、零拷贝案例四、总结一、I/O工作方式磁盘可以说是计算机系统中最慢的硬件之一，读写速度相差内存10倍以上，所以针对磁盘的优化技术非常多。下面以文件传输为切入线分析I/O的工作方式。在没有DMA技术前，I/O是这样工作的，如下图：用户发起read调用，CPU将对应的指令给磁盘控制器，然后返回；
  • 基于netty手写Tomcat Aiden_Coding nettyjavanettyspringtomcat
    基于netty手写Tomcatnetty简介1.环境准备2.基于传统I/O手写Tomcat3.基于netty手写Tomcat4.访问netty简介Netty一个基于NIO的客户、服务器端的编程框架1.环境准备maven依赖io.nettynetty-all4.1.42.FinalRequestMethodEnum请求方式publicenumRequestMethodEnum{GET("GET"),
  • Linux系统之部署记忆配对网页小游戏 江湖有缘 玩转小游戏合集linux服务器web小游戏
    Linux系统之部署记忆配对网页小游戏一、小游戏介绍1.1小游戏简介1.2项目预览二、本次实践介绍2.1本地环境规划2.2本次实践介绍三、检查本地环境3.1检查系统版本3.2检查系统内核版本3.3检查软件源四、安装Apache24.1安装Apache2软件4.2启动apache2服务4.3查看apache2服务状态4.4防火墙设置4.5浏览器测试web服务五、部署小游戏5.1下载小游戏源码5.2查
  • lua.c:82:31: fatal error: readline/readline.h: No such file or directory _躬行_ lua环境配置与错误解决lua
    目录坑（一）添加libreadline-dev包坑（2）显示缺少libreadline6-dev，于是又用命令坑（3）解决办法：在ubuntu16.0.4上安装lua5.3.5，运行命令makelinux报错lua.c:82:31:fatalerror:readline/readline.h:Nosuchfileordirectorycompilationterminated.:recipefor
  • 推荐开源项目：YFT Design - 强大的在线图片设计工具 咎旗盼Jewel
    推荐开源项目：YFTDesign-强大的在线图片设计工具yft-design基于fabric.js的图片设计,fabric.jsandvue3andtypescriptandelement-plus,supportingthemostcommonlyusedelementtypessuchastext,images,shapes,lines,QRcodes,andbarcodes.Eachelem
  • 【建议收藏】DeepSeek学习手册合集 2501_91151777 pdf
    DeepSeek资源链接：https://pan.quark.cn/s/19500abf3ace流水的AI，铁打的DeepSeek。热点AI成出不穷，可DeepSeek始终站稳大哥的位置，不可动摇！清华北大不断出品DeepSeek精品课程，华为pc新品可本地部署DeepSeek。想学好AI，先学好DeepSeek。我们深知优质的学习资料对AI学习者的重要性，为此，我们精心整理了全网热门DeepSe
  • 蓝桥杯常见算法模板（Python组） -777. 蓝桥杯算法
    目录1.二分1.整数二分（二分答案）：2.浮点数二分（考不到）2.前缀和、差分1.前缀和一维：二维：2.差分一维：二维：3.贪心4.线性DP1.最长上升子序列（子序列问题一般下标从一开始）2.最长公共子序列3.常见背包模型1.0-1背包2.完全背包3.多重背包4.混合背包5.二维费用背包6.分组背包5.搜索1.DFS模板：1.子集问题2.全排列问题2.BFS6.数据结构1.并查集2.树状数组3.树
  • Unity中WolrdSpace下的UI展示在上层 程序员也有头发 Unity开发unityui游戏引擎
    一、问题描述Unity中Canvas使用WorldSpace布局的UI，想让它不被3d物体遮挡，始终显示在上层。二、解决方案使用shader解决在UI的材质中禁用深度测试（ZTest），强制UI始终渲染在最上层。Shader"Custom/UI_NoDepthTest"{Properties{...}SubShader{Tags{"Queue"="Transparent+1000"//设置高优先级
  • 30个节点的Doris集群，每个节点有2块7TB的SSD盘，12块8TB的机械盘，分区和分桶的最佳实践 fzip DorisDoris分区分桶
    针对30个节点（每个节点配备2块7TBNVMe盘+12块8TBSATA盘）的Doris集群，以下是分区与分桶的最佳实践方案：一、硬件资源规划与存储优化存储介质分层•NVMe盘：用于存储热数据分区（如最近3天数据）、元数据和高频查询表，利用其高IOPS特性提升实时查询性能。•SATA盘：存储冷数据分区（如历史数据）、大宽表和批量导入的中间数据，通过成本优势支撑海量存储。磁盘负载均衡•每个节点的14块
  • Python3 使用 clickhouse-connect 操作 clickhouse 她不喜欢喝咖啡 Pythonclickhouse
    '''版本：Python3.7x86clickhouse24.6.1.3573clickhouse-connect0.6.22'''代码一：#pipinstallclickhouse-connectimportclickhouse_connect#准备参数host="192.168.1.112"port=8123username="default"password="123456"database
  • Java常用排序算法/程序员必须掌握的8大排序算法 cugfy java
    分类： 1）插入排序（直接插入排序、希尔排序） 2）交换排序（冒泡排序、快速排序） 3）选择排序（直接选择排序、堆排序） 4）归并排序 5）分配排序（基数排序） 所需辅助空间最多：归并排序 所需辅助空间最少：堆排序 平均速度最快：快速排序 不稳定：快速排序，希尔排序，堆排序。 先来看看8种排序之间的关系：   1.直接插入排序 （1
  • 【Spark102】Spark存储模块BlockManager剖析 bit1129 manager
    Spark围绕着BlockManager构建了存储模块，包括RDD，Shuffle，Broadcast的存储都使用了BlockManager。而BlockManager在实现上是一个针对每个应用的Master/Executor结构，即Driver上BlockManager充当了Master角色，而各个Slave上(具体到应用范围，就是Executor)的BlockManager充当了Slave角色
  • linux 查看端口被占用情况详解 daizj linux端口占用netstatlsof
    经常在启动一个程序会碰到端口被占用，这里讲一下怎么查看端口是否被占用，及哪个程序占用，怎么Kill掉已占用端口的程序   1、lsof -i:port port为端口号   [root@slave /data/spark-1.4.0-bin-cdh4]# lsof -i:8080 COMMAND   PID USER   FD   TY
  • Hosts文件使用 周凡杨 hostslocahost
         一切都要从localhost说起，经常在tomcat容器起动后，访问页面时输入http://localhost:8088/index.jsp，大家都知道localhost代表本机地址，如果本机IP是10.10.134.21，那就相当于http://10.10.134.21:8088/index.jsp，有时候也会看到http: 127.0.0.1:
  • java excel工具 g21121 Java excel
    直接上代码，一看就懂，利用的是jxl： import java.io.File; import java.io.IOException; import jxl.Cell; import jxl.Sheet; import jxl.Workbook; import jxl.read.biff.BiffException; import jxl.write.Label; import
  • web报表工具finereport常用函数的用法总结（数组函数） 老A不折腾 finereportweb报表函数总结
    ADD2ARRAY ADDARRAY(array,insertArray, start):在数组第start个位置插入insertArray中的所有元素，再返回该数组。 示例： ADDARRAY([3,4, 1, 5, 7], [23, 43, 22], 3)返回[3, 4, 23, 43, 22, 1, 5, 7]. ADDARRAY([3,4, 1, 5, 7], "测试&q
  • 游戏服务器网络带宽负载计算 墙头上一根草 服务器
    家庭所安装的4M，8M宽带。其中M是指，Mbits/S 其中要提前说明的是： 8bits = 1Byte 即8位等于1字节。我们硬盘大小50G。意思是50*1024M字节，约为 50000多字节。但是网宽是以“位”为单位的，所以，8Mbits就是1M字节。是容积体积的单位。 8Mbits/s后面的S是秒。8Mbits/s意思是 每秒8M位，即每秒1M字节。 我是在计算我们网络流量时想到的
  • 我的spring学习笔记2-IoC（反向控制 依赖注入） aijuans Spring 3 系列
    IoC（反向控制 依赖注入）这是Spring提出来了，这也是Spring一大特色。这里我不用多说，我们看Spring教程就可以了解。当然我们不用Spring也可以用IoC，下面我将介绍不用Spring的IoC。 IoC不是框架，她是java的技术，如今大多数轻量级的容器都会用到IoC技术。这里我就用一个例子来说明： 如：程序中有 Mysql.calss 、Oracle.class 、SqlSe
  • 高性能mysql 之 选择存储引擎(一) annan211 mysqlInnoDBMySQL引擎存储引擎
    1 没有特殊情况，应尽可能使用InnoDB存储引擎。   原因：InnoDB 和 MYIsAM 是mysql 最常用、使用最普遍的存储引擎。其中InnoDB是最重要、最广泛的存储引擎。她   被设计用来处理大量的短期事务。短期事务大部分情况下是正常提交的，很少有回滚的情况。InnoDB的性能和自动崩溃   恢复特性使得她在非事务型存储的需求中也非常流行，除非有非常
  • UDP网络编程 百合不是茶 UDP编程局域网组播
      UDP是基于无连接的,不可靠的传输   与TCP/IP相反       UDP实现私聊,发送方式客户端,接受方式服务器 package netUDP_sc; import java.net.DatagramPacket; import java.net.DatagramSocket; import java.net.Ine
  • JQuery对象的val()方法执行结果分析 bijian1013 JavaScriptjsjquery
            JavaScript中，如果id对应的标签不存在（同理JAVA中，如果对象不存在），则调用它的方法会报错或抛异常。在实际开发中，发现JQuery在id对应的标签不存在时，调其val()方法不会报错，结果是undefined。        
  • http请求测试实例（采用json-lib解析） bijian1013 jsonhttp
            由于fastjson只支持JDK1.5版本，因些对于JDK1.4的项目，可以采用json-lib来解析JSON数据。如下是http请求的另外一种写法，仅供参考。 package com; import java.util.HashMap; import java.util.Map; import
  • 【RPC框架Hessian四】Hessian与Spring集成 bit1129 hessian
    在【RPC框架Hessian二】Hessian 对象序列化和反序列化一文中介绍了基于Hessian的RPC服务的实现步骤，在那里使用Hessian提供的API完成基于Hessian的RPC服务开发和客户端调用，本文使用Spring对Hessian的集成来实现Hessian的RPC调用。   定义模型、接口和服务器端代码 |---Model    &nb
  • 【Mahout三】基于Mahout CBayes算法的20newsgroup流程分析 bit1129 Mahout
    1.Mahout环境搭建  1.下载Mahout http://mirror.bit.edu.cn/apache/mahout/0.10.0/mahout-distribution-0.10.0.tar.gz    2.解压Mahout  3. 配置环境变量 vim /etc/profile export HADOOP_HOME=/home
  • nginx负载tomcat遇非80时的转发问题 ronin47
    　　nginx负载后端容器是tomcat（其它容器如WAS,JBOSS暂没发现这个问题）非８０端口，遇到跳转异常问题。解决的思路是：$host:port        详细如下： 　　 该问题是最先发现的，由于之前对nginx不是特别的熟悉所以该问题是个入门级别的： ? 1 2 3 4 5
  • java-17-在一个字符串中找到第一个只出现一次的字符 bylijinnan java
    public class FirstShowOnlyOnceElement { /**Q17.在一个字符串中找到第一个只出现一次的字符。如输入abaccdeff，则输出b * 1.int[] count:count[i]表示i对应字符出现的次数 * 2.将26个英文字母映射：a-z <--> 0-25 * 3.假设全部字母都是小写 */ pu
  • mongoDB 复制集 开窍的石头 mongodb
    mongo的复制集就像mysql的主从数据库，当你往其中的主复制集(primary)写数据的时候，副复制集(secondary)会自动同步主复制集(Primary)的数据,当主复制集挂掉以后其中的一个副复制集会自动成为主复制集。提供服务器的可用性。和防止当机问题             mo
  • [宇宙与天文]宇宙时代的经济学 comsci 经济
        宇宙尺度的交通工具一般都体型巨大，造价高昂。。。。。      在宇宙中进行航行，近程采用反作用力类型的发动机，需要消耗少量矿石燃料，中远程航行要采用量子或者聚变反应堆发动机，进行超空间跳跃，要消耗大量高纯度水晶体能源      以目前地球上国家的经济发展水平来讲，
  • Git忽略文件 Cwind git
         有很多文件不必使用git管理。例如Eclipse或其他IDE生成的项目文件，编译生成的各种目标或临时文件等。使用git status时，会在Untracked files里面看到这些文件列表，在一次需要添加的文件比较多时（使用git add . / git add -u），会把这些所有的未跟踪文件添加进索引。 ==== ==== ==== 一些牢骚
  • MySQL连接数据库的必须配置 dashuaifu mysql连接数据库配置
    MySQL连接数据库的必须配置   1.driverClass：com.mysql.jdbc.Driver   2.jdbcUrl：jdbc:mysql://localhost:3306/dbname   3.user：username   4.password：password   其中1是驱动名；2是url，这里的‘dbna
  • 一生要养成的60个习惯 dcj3sjt126com 习惯
    一生要养成的60个习惯 第1篇 让你更受大家欢迎的习惯 1 守时，不准时赴约,让别人等,会失去很多机会。 如何做到： ①该起床时就起床， ②养成任何事情都提前15分钟的习惯。 ③带本可以随时阅读的书，如果早了就拿出来读读。 ④有条理，生活没条理最容易耽误时间。 ⑤提前计划：将重要和不重要的事情岔开。 ⑥今天就准备好明天要穿的衣服。 ⑦按时睡觉，这会让按时起床更容易。 2 注重
  • [介绍]Yii 是什么 dcj3sjt126com PHPyii2
    Yii 是一个高性能，基于组件的 PHP 框架，用于快速开发现代 Web 应用程序。名字 Yii （读作 易）在中文里有“极致简单与不断演变”两重含义，也可看作 Yes It Is! 的缩写。 Yii 最适合做什么？ Yii 是一个通用的 Web 编程框架，即可以用于开发各种用 PHP 构建的 Web 应用。因为基于组件的框架结构和设计精巧的缓存支持，它特别适合开发大型应
  • Linux SSH常用总结 eksliang linux sshSSHD
    转载请出自出处：http://eksliang.iteye.com/blog/2186931 一、连接到远程主机   格式： ssh name@remoteserver 例如： ssh [email protected]   二、连接到远程主机指定的端口   格式： ssh name@remoteserver -p 22 例如： ssh i
  • 快速上传头像到服务端工具类FaceUtil gundumw100 android
    快速迭代用 import java.io.DataOutputStream; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.FileOutputStream; import java.io.IOExceptio
  • jQuery入门之怎么使用 ini JavaScripthtmljqueryWebcss
    jQuery的强大我何问起（个人主页：hovertree.com）就不用多说了，那么怎么使用jQuery呢？   首先，下载jquery。下载地址：http://hovertree.com/hvtart/bjae/b8627323101a4994.htm，一个是压缩版本，一个是未压缩版本，如果在开发测试阶段，可以使用未压缩版本，实际应用一般使用压缩版本(min)。然后就在页面上引用。
  • 带filter的hbase查询优化 kane_xie 查询优化hbaseRandomRowFilter
    问题描述 hbase scan数据缓慢，server端出现LeaseException。hbase写入缓慢。   问题原因 直接原因是： hbase client端每次和regionserver交互的时候，都会在服务器端生成一个Lease,Lease的有效期由参数hbase.regionserver.lease.period确定。如果hbase scan需
  • java设计模式-单例模式 men4661273 java单例枚举反射IOC
             单例模式1，饿汉模式 //饿汉式单例类.在类初始化时，已经自行实例化 public class Singleton1 { //私有的默认构造函数 private Singleton1() {} //已经自行实例化 private static final Singleton1 singl
  • mongodb 查询某一天所有信息的3种方法，根据日期查询 qiaolevip 每天进步一点点学习永无止境mongodb纵观千象
    // mongodb的查询真让人难以琢磨，就查询单天信息，都需要花费一番功夫才行。 // 第一种方式： coll.aggregate([ {$project:{sendDate: {$substr: ['$sendTime', 0, 10]}, sendTime: 1, content:1}}, {$match:{sendDate: '2015-
  • 二维数组转换成JSON tangqi609567707 java二维数组json
    原文出处：http://blog.csdn.net/springsen/article/details/7833596 public class Demo {     public static void main(String[] args) {        String[][] blogL
  • erlang supervisor wudixiaotie erlang
    定义supervisor时，如果是监控celuesimple_one_for_one则删除children的时候就用supervisor:terminate_child (SupModuleName, ChildPid)，如果shutdown策略选择的是brutal_kill，那么supervisor会调用exit(ChildPid, kill)，这样的话如果Child的behavior是gen_
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他